js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add metadata plugin to docsify

Browse Source
This commit is contained in:
Cory LaViska
2020-05-22 16:27:48 -04:00
parent 0401a4c76a
commit 21c37d2351
29 changed files with 941 additions and 3749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,6 +1,3 @@
# Ignore generated docs files
docs/components/
src/components/icon/icons
dist/

2
docs/_sidebar.md
View File

@@ -1,4 +1,4 @@
- Concepts
- Overview
- [Getting Started](/)
- [Installation](/installation.md)
- [Customizing](/customizing.md)

248
docs/assets/scripts/component-metadata-plugin.js Normal file
View File

@@ -0,0 +1,248 @@
(() => {
let componentMetadata;
function createPropsTable(props) {
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>Property</th>
<th>Attribute</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
${props
.map(
prop => `
<tr>
<td><code>${escapeHtml(prop.name)}</code></td>
<td><code>${escapeHtml(prop.attr)}</code></td>
<td>${escapeHtml(prop.docs)}</td>
<td><code>${escapeHtml(prop.type)}</code></td>
<td><code>${escapeHtml(prop.default)}</code></td>
</tr>
`
)
.join('')}
</tbody>
`;
return table.outerHTML;
}
function createEventsTable(events) {
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>Event</th>
<th>Description</th>
<th>Type</th>
</tr>
</thead>
<tbody>
${events
.map(
event => `
<tr>
<td><code>${escapeHtml(event.event)}</code></td>
<td>${escapeHtml(event.docs)}</td>
<td><code>CustomEvent&lt;${escapeHtml(event.detail)}&gt;</code></td>
</tr>
`
)
.join('')}
</tbody>
`;
return table.outerHTML;
}
function createMethodsTable(methods) {
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>Method</th>
<th>Description</th>
<th>Returns</th>
</tr>
</thead>
<tbody>
${methods
.map(
method => `
<tr>
<td><code>${escapeHtml(method.name)}</code></td>
<td>${escapeHtml(method.docs)}</td>
<td><code>${escapeHtml(method.returns.type)}</code></td>
</tr>
`
)
.join('')}
</tbody>
`;
return table.outerHTML;
}
function createSlotsTable(slots) {
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>Slot</th>
<th>Description</th>
</tr>
</thead>
<tbody>
${slots
.map(
slot => `
<tr>
<td><code>${slot.name ? escapeHtml(slot.name) : '(default)'}</code></td>
<td>${escapeHtml(slot.docs)}</td>
</tr>
`
)
.join('')}
</tbody>
`;
return table.outerHTML;
}
function createCustomPropertiesTable(styles) {
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
${styles
.map(
style => `
<tr>
<td><code>${escapeHtml(style.name)}</code></td>
<td>${escapeHtml(style.docs)}</td>
</tr>
`
)
.join('')}
</tbody>
`;
return table.outerHTML;
}
function createDependenciesList(dependencies) {
const ul = document.createElement('ul');
ul.innerHTML = `
${dependencies
.map(
dependency => `
<li><code>${escapeHtml(dependency)}</code></li>
`
)
.join('')}
`;
return ul.outerHTML;
}
function escapeHtml(html) {
return (html + '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
function getMetadata() {
return new Promise((resolve, reject) => {
if (componentMetadata) {
return resolve(componentMetadata);
}
return fetch('/assets/dist/components.json')
.then(res => res.json())
.then(data => {
componentMetadata = data;
resolve(componentMetadata);
});
});
}
if (!window.$docsify) {
throw new Error('Docsify must be loaded before installing this plugin.');
}
window.$docsify.plugins.push((hook, vm) => {
hook.beforeEach(async function (content, next) {
const metadata = await getMetadata();
content = content.replace(/\[component-metadata:([a-z-]+)\]/g, (match, tag) => {
const data = metadata.components.filter(data => data.tag === tag)[0];
let result = '';
if (!data) {
throw new Error('Component not found in metadata: ' + tag);
}
if (data.props.length) {
result += `
## Properties
${createPropsTable(data.props)}
`;
}
if (data.events.length) {
result += `
## Events
${createEventsTable(data.events)}
`;
}
if (data.methods.length) {
result += `
## Methods
${createMethodsTable(data.methods)}
`;
}
if (data.slots.length) {
result += `
## Slots
${createSlotsTable(data.slots)}
`;
}
if (data.styles.length) {
result += `
## CSS Custom Properties
${createCustomPropertiesTable(data.styles)}
`;
}
if (data.dependencies.length) {
result += `
## Dependencies
${createDependenciesList(data.dependencies)}
`;
}
// Strip whitespace so markdown doesn't process things as code blocks
return result.replace(/^ +| +$/gm, '');
});
next(content);
});
});
})();

48
docs/components/alert.md Normal file
View File

@@ -0,0 +1,48 @@
# Alert
```html preview
<sl-alert type="primary" open>
Nothing fancy here, just a simple alert.
</sl-alert><br>
<sl-alert type="primary" open closable>
<sl-icon slot="icon" name="info"></sl-icon>
This one is a bit fancier because now it has an icon and is closable.
</sl-alert>
```
## Types
```html preview
<sl-alert type="primary" open closable>
<sl-icon slot="icon" name="info"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="success" open closable>
<sl-icon slot="icon" name="check-circle"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="info" open closable>
<sl-icon slot="icon" name="settings"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="warning" open closable>
<sl-icon slot="icon" name="alert-triangle"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert><br>
<sl-alert type="danger" open closable>
<sl-icon slot="icon" name="alert-octagon"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can continue working or safely leave the app now.
</sl-alert>
```
[component-metadata:sl-alert]

124
docs/components/button.md Normal file
View File

@@ -0,0 +1,124 @@
# Button
Good ol' buttons. They're usually the first thing I look at when reviewing a component library. Shoelace offers a variation for every theme color.
```html preview
<sl-button type="default" tabindex>Default</sl-button>
<sl-button type="primary" tabindex>Primary</sl-button>
<sl-button type="success" tabindex>Success</sl-button>
<sl-button type="info">Info</sl-button>
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
```
## Pill
Use the `pill` prop to give buttons rounded edges.
```html preview
<sl-button type="default" pill>Default</sl-button>
<sl-button type="primary" pill>Primary</sl-button>
<sl-button type="success" pill>Success</sl-button>
<sl-button type="info" pill>Info</sl-button>
<sl-button type="warning" pill>Warning</sl-button>
<sl-button type="danger" pill>Danger</sl-button>
```
## Sizes
Use the `size` prop to change a button's size.
```html preview
<sl-button size="small">Small</sl-button>
<sl-button size="medium">Medium</sl-button>
<sl-button size="large">Large</sl-button>
```
## Circle
Use the `circle` prop to create circular icon buttons.
```html preview
<sl-button type="default" size="small" circle><sl-icon name="settings"></sl-icon></sl-button>
<sl-button type="default" size="medium" circle><sl-icon name="settings"></sl-icon></sl-button>
<sl-button type="default" size="large" circle><sl-icon name="settings"></sl-icon></sl-button>
```
## Text
Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders.
```html preview
<sl-button type="text" size="small">Text</sl-button>
<sl-button type="text" size="medium">Text</sl-button>
<sl-button type="text" size="large">Text</sl-button>
```
## Block
Block buttons can be created by setting the button's width to `100%`.
```html preview
<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
<sl-button type="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
```
## Icons
Use the `prefix` and `suffix` slots to add icons.
```html preview
<sl-button type="default">
<sl-icon slot="prefix" name="settings"></sl-icon>
Settings
</sl-button>
<sl-button type="default">
<sl-icon slot="suffix" name="refresh-ccw"></sl-icon>
Refresh
</sl-button>
<sl-button type="default">
<sl-icon slot="prefix" name="link"></sl-icon>
<sl-icon slot="suffix" name="external-link"></sl-icon>
Open
</sl-button>
```
## Caret
Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
```html preview
<sl-button size="small" caret>Small</sl-button>
<sl-button size="medium" caret>Medium</sl-button>
<sl-button size="large" caret>Large</sl-button>
```
## Loading
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
```html preview
<sl-button type="default" loading>Default</sl-button>
<sl-button type="primary" loading>Primary</sl-button>
<sl-button type="success" loading>Success</sl-button>
<sl-button type="info" loading>Info</sl-button>
<sl-button type="warning" loading>Warning</sl-button>
<sl-button type="danger" loading>Danger</sl-button>
```
## Disabled
Use the `disabled` prop to disable a button.
```html preview
<sl-button type="default" disabled>Default</sl-button>
<sl-button type="primary" disabled>Primary</sl-button>
<sl-button type="success" disabled>Success</sl-button>
<sl-button type="info" disabled>Info</sl-button>
<sl-button type="warning" disabled>Warning</sl-button>
<sl-button type="danger" disabled>Danger</sl-button>
```
[component-metadata:sl-button]

10
docs/components/checkbox.md Normal file
View File

@@ -0,0 +1,10 @@
# Checkbox
```html preview
<sl-checkbox>Default</sl-checkbox><br><br>
<sl-checkbox checked>Checked</sl-checkbox><br><br>
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br><br>
<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
```
[component-metadata:sl-checkbox]

11
docs/components/color-picker.md Normal file
View File

@@ -0,0 +1,11 @@
# Color Picker
```html preview
<sl-color-picker opacity></sl-color-picker>
```
```html preview
<sl-color-picker opacity inline></sl-color-picker>
```
[component-metadata:sl-color-picker]

23
docs/components/dialog.md Normal file
View File

@@ -0,0 +1,23 @@
# Dialog
```html preview
<sl-dialog label="Dialog" id="dialog-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary" id="dialog-1-close">Close</sl-button>
</sl-dialog>
<sl-button id="dialog-1-open">Open Dialog</sl-button>
<script>
(() => {
const dialog = document.querySelector('#dialog-1');
const openButton = document.querySelector('#dialog-1-open');
const closeButton = document.querySelector('#dialog-1-close');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
})();
</script>
```
[component-metadata:sl-dialog]

7
docs/components/dropdown-divider.md Normal file
View File

@@ -0,0 +1,7 @@
# Dropdown Divider
Dropdown dividers can be used to separate dropdown items and other content inside dropdowns.
See the Dropdown component for more usage examples.
[component-metadata:sl-dropdown-divider]

7
docs/components/dropdown-item.md Normal file
View File

@@ -0,0 +1,7 @@
# Dropdown Item
Dropdown items can be used inside dropdowns to add menu items that the user can select.
See the Dropdown component for more usage examples.
[component-metadata:sl-dropdown-item]

62
docs/components/dropdown.md Normal file
View File

@@ -0,0 +1,62 @@
# Dropdown
```html preview
<sl-dropdown>
<sl-button slot="trigger" caret>Dropdown</sl-button>
<sl-dropdown-item>Dropdown Item 1</sl-dropdown-item>
<sl-dropdown-item>Dropdown Item 2</sl-dropdown-item>
<sl-dropdown-item>Dropdown Item 3</sl-dropdown-item>
<sl-dropdown-divider></sl-dropdown-divider>
<sl-dropdown-item checked>Checked</sl-dropdown-item>
<sl-dropdown-item disabled>Disabled</sl-dropdown-item>
<sl-dropdown-divider></sl-dropdown-divider>
<sl-dropdown-item>
Prefix
<sl-icon slot="prefix" name="gift"></sl-icon>
</sl-dropdown-item>
<sl-dropdown-item>
Suffix Icon
<sl-icon slot="suffix" name="heart"></sl-icon>
</sl-dropdown-item>
</sl-dropdown>
```
```html preview
<sl-dropdown>
<sl-button slot="trigger" caret>Edit</sl-button>
<sl-dropdown-item>Cut</sl-dropdown-item>
<sl-dropdown-item>Copy</sl-dropdown-item>
<sl-dropdown-item>Paste</sl-dropdown-item>
<sl-dropdown-divider></sl-dropdown-divider>
<sl-dropdown-item>Find</sl-dropdown-item>
<sl-dropdown-item>Replace</sl-dropdown-item>
</sl-dropdown>
```
```html preview
<sl-dropdown>
<sl-button slot="trigger" caret>Scrolling Menu</sl-button>
<sl-dropdown-item>Item 1</sl-dropdown-item>
<sl-dropdown-item>Item 2</sl-dropdown-item>
<sl-dropdown-item>Item 3</sl-dropdown-item>
<sl-dropdown-item>Item 4</sl-dropdown-item>
<sl-dropdown-item>Item 5</sl-dropdown-item>
<sl-dropdown-item>Item 6</sl-dropdown-item>
<sl-dropdown-item>Item 7</sl-dropdown-item>
<sl-dropdown-item>Item 8</sl-dropdown-item>
<sl-dropdown-item>Item 9</sl-dropdown-item>
<sl-dropdown-item>Item 10</sl-dropdown-item>
<sl-dropdown-item>Item 11</sl-dropdown-item>
<sl-dropdown-item>Item 12</sl-dropdown-item>
<sl-dropdown-item>Item 13</sl-dropdown-item>
<sl-dropdown-item>Item 14</sl-dropdown-item>
<sl-dropdown-item>Item 15</sl-dropdown-item>
<sl-dropdown-item>Item 16</sl-dropdown-item>
<sl-dropdown-item>Item 17</sl-dropdown-item>
<sl-dropdown-item>Item 18</sl-dropdown-item>
<sl-dropdown-item>Item 19</sl-dropdown-item>
<sl-dropdown-item>Item 20</sl-dropdown-item>
</sl-dropdown>
```
[component-metadata:sl-dropdown]

41
docs/components/icon.md Normal file
View File

@@ -0,0 +1,41 @@
# Icon
```html preview
<div style="font-size: 1rem; margin-bottom: 2rem;">
<sl-icon name="alert-triangle"></sl-icon>
<sl-icon name="archive"></sl-icon>
<sl-icon name="battery"></sl-icon>
<sl-icon name="bell"></sl-icon>
<sl-icon name="clock"></sl-icon>
<sl-icon name="chevron-down"></sl-icon>
<sl-icon name="download"></sl-icon>
<sl-icon name="file"></sl-icon>
<sl-icon name="flag"></sl-icon>
<sl-icon name="image"></sl-icon>
<sl-icon name="mic"></sl-icon>
<sl-icon name="search"></sl-icon>
<sl-icon name="trash"></sl-icon>
<sl-icon name="x-circle"></sl-icon>
</div>
<div style="font-size: 2rem; margin-bottom: 2rem;">
<sl-icon name="alert-triangle"></sl-icon>
<sl-icon name="archive"></sl-icon>
<sl-icon name="battery"></sl-icon>
<sl-icon name="bell"></sl-icon>
<sl-icon name="clock"></sl-icon>
<sl-icon name="chevron-down"></sl-icon>
<sl-icon name="download"></sl-icon>
<sl-icon name="file"></sl-icon>
<sl-icon name="flag"></sl-icon>
<sl-icon name="image"></sl-icon>
<sl-icon name="mic"></sl-icon>
<sl-icon name="search"></sl-icon>
<sl-icon name="trash"></sl-icon>
<sl-icon name="x-circle"></sl-icon>
</div>
```
Icons are courtesy of [Feather Icons](https://feathericons.com/).
[component-metadata:sl-icon]

76
docs/components/input.md Normal file
View File

@@ -0,0 +1,76 @@
# Input
```html preview
<sl-input type="text" placeholder="Small" size="small"></sl-input>
<br><br>
<sl-input type="text" placeholder="Medium" size="medium"></sl-input>
<br><br>
<sl-input type="text" placeholder="Large" size="large"></sl-input>
<br><br>
<sl-input type="text" placeholder="Small" size="small">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
<sl-input type="text" placeholder="Medium" size="medium">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
<sl-input type="text" placeholder="Large" size="large">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>
<br><br>
<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
<br><br>
<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>
<br><br>
<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>
<br><br>
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
<br><br>
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
<br><br>
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
<br><br>
<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
<br><br>
<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>
<br><br>
<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
<br><br>
<sl-input type="number" placeholder="Number"></sl-input>
```
[component-metadata:sl-input]

19
docs/components/progress-bar.md Normal file
View File

@@ -0,0 +1,19 @@
# Progress Bar
```html preview
<sl-progress-bar percentage="0"></sl-progress-bar><br>
<sl-progress-bar percentage="25"></sl-progress-bar><br>
<sl-progress-bar percentage="50"></sl-progress-bar><br>
<sl-progress-bar percentage="75"></sl-progress-bar><br>
<sl-progress-bar percentage="100"></sl-progress-bar>
```
```html preview
<sl-progress-bar percentage="0" height="18">0%</sl-progress-bar><br>
<sl-progress-bar percentage="25" height="18">25%</sl-progress-bar><br>
<sl-progress-bar percentage="50" height="18">50%</sl-progress-bar><br>
<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
<sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
```
[component-metadata:sl-progress-bar]

13
docs/components/progress-ring.md Normal file
View File

@@ -0,0 +1,13 @@
# Progress Ring
```html preview
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<sl-progress-ring percentage="0">0%</sl-progress-ring><br>
<sl-progress-ring percentage="25">25%</sl-progress-ring><br>
<sl-progress-ring percentage="50">50%</sl-progress-ring><br>
<sl-progress-ring percentage="75">75%</sl-progress-ring><br>
<sl-progress-ring percentage="100">100%</sl-progress-ring>
</div>
```
[component-metadata:sl-progress-bar]

9
docs/components/radio.md Normal file
View File

@@ -0,0 +1,9 @@
# Radio
```html preview
<sl-radio>Default</sl-radio><br><br>
<sl-radio checked>Checked</sl-radio><br><br>
<sl-radio disabled>Disabled</sl-radio><br><br>
```
[component-metadata:sl-radio]

32
docs/components/range.md Normal file
View File

@@ -0,0 +1,32 @@
# Range
```html preview
<sl-range min="0" max="100" step="1"></sl-range>
<br><br>
<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
<br><br>
<sl-range id="range-with-custom-formatter" min="0" max="100" step="1"></sl-range>
<script>
(() => {
document.querySelector('#range-with-custom-formatter').tooltipFormatter = value => `Total - ${value}%`;
})();
</script>
<br><br>
<sl-range min="1" max="10" step=".25"></sl-range>
<br><br>
<sl-range min="0" max="100" step="1" disabled></sl-range>
<br><br>
<sl-range min="0" max="100" step="1" tooltip="off"></sl-range>
```
[component-metadata:sl-range]

9
docs/components/spinner.md Normal file
View File

@@ -0,0 +1,9 @@
# Spinner
```html preview
<sl-spinner></sl-spinner>
<sl-spinner diameter="32"></sl-spinner>
<sl-spinner diameter="48"></sl-spinner>
```
[component-metadata:sl-spinner]

9
docs/components/switch.md Normal file
View File

@@ -0,0 +1,9 @@
# Switch
```html preview
<sl-switch>Switch</sl-switch><br><br>
<sl-switch checked>Checked</sl-switch><br><br>
<sl-switch disabled>Disabled</sl-switch><br><br>
```
[component-metadata:sl-switch]

123
docs/components/tab-group.md Normal file
View File

@@ -0,0 +1,123 @@
# Tab Group
```html preview
<sl-tab-group placement="top">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
<sl-tab-panel name="general">General</sl-tab-panel>
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
```
```html preview
<sl-tab-group placement="bottom">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
<sl-tab-panel name="general">General</sl-tab-panel>
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
```
```html preview
<sl-tab-group placement="left">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
<sl-tab-panel name="general">General</sl-tab-panel>
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
```
```html preview
<sl-tab-group placement="right">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
<sl-tab-panel name="general">General</sl-tab-panel>
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
```
```html preview
<sl-tab-group>
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
<sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
<sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
<sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
<sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
<sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
<sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
<sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
<sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
<sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
<sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
<sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
<sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
<sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
<sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
<sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
<sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
<sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
<sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
<sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
<sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
<sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
<sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
<sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
<sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
<sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
<sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
<sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
<sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
<sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
<sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
<sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
<sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
<sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
<sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
<sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
<sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
<sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
<sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
<sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
</sl-tab-group>
```
## Notes
Serious consideration was given to simplifying the tab group API into two components with a structure similar to:
```html
<!-- Not a valid syntax! -->
<sl-tab-group placement="top">
<sl-tab label="General">General</sl-tab>
<sl-tab label="Custom">Custom</sl-tab>
<sl-tab label="Advanced">Advanced</sl-tab>
<sl-tab label="Disabled" disabled>Disabled</sl-tab>
</sl-tab-group>
```
However, there are two caveats to this approach. The first is that labels must be generated and stored in the tab group's shadow DOM. For accessibility reasons, tabs and tab panels must be linked via `id` using the `aria-controls` and `aria-labeledby` attribute, respectively. When a tab is inside a shadow DOM, its `id` becomes inaccessible to the light DOM and accessibility is broken.
The second thing is that labels would be limited to text only. If you wanted to put an icon, a badge, or another element inside the label, it wouldn't be possible with this approach.
[component-metadata:sl-tab-group]

7
docs/components/tab-panel.md Normal file
View File

@@ -0,0 +1,7 @@
# Tab Panel
Tab Panels are used to create panels inside Tab Groups.
See the Tab Group component for more usage examples.
[component-metadata:sl-tab-panel]

7
docs/components/tab.md Normal file
View File

@@ -0,0 +1,7 @@
# Tab
Tabs are used to create tabs inside Tab Groups.
See the Tab Group component for more usage examples.
[component-metadata:sl-tab]

13
docs/components/textarea.md Normal file
View File

@@ -0,0 +1,13 @@
# Textarea
```html preview
<sl-textarea placeholder="Standard" resize="none"></sl-textarea><br><br>
<sl-textarea placeholder="Resizable" resize="vertical"></sl-textarea><br><br>
<sl-textarea placeholder="Auto" resize="auto"></sl-textarea><br><br>
<sl-textarea placeholder="Disabled" resize="none" disabled></sl-textarea><br><br>
```
[component-metadata:sl-textarea]

28
docs/components/tooltip.md Normal file
View File

@@ -0,0 +1,28 @@
# Tooltip
```html preview
<sl-button>Tooltip</sl-button>
<sl-tooltip>This is a tooltip</sl-tooltip>
<sl-button>Tooltip With Arrow</sl-button>
<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
<a href="#">Tooltip On Link</a>
<sl-tooltip>This is a tooltip on a link</sl-tooltip>
<br><br>
<sl-button>Top</sl-button>
<sl-tooltip placement="top" arrow>Tooltip</sl-tooltip>
<sl-button>Bottom</sl-button>
<sl-tooltip placement="bottom" arrow>Tooltip</sl-tooltip>
<sl-button>Left</sl-button>
<sl-tooltip placement="left" arrow>Tooltip</sl-tooltip>
<sl-button>Right</sl-button>
<sl-tooltip placement="right" arrow>Tooltip</sl-tooltip>
```
[component-metadata:sl-tooltip]

3
docs/index.html
View File

@@ -64,7 +64,8 @@
<script src="https://unpkg.com/docsify-copy-code"></script>
<script src="https://unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<script src="https://unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
<script src="/assets/scripts/code-block-plugin.js"></script>
<script src="https://unpkg.com/prismjs@1.19.0/components/prism-bash.js"></script>
<script src="/assets/scripts/code-block-plugin.js"></script>
<script src="/assets/scripts/component-metadata-plugin.js"></script>
</body>
</html>

36
gulpfile.js
View File

@@ -1,36 +0,0 @@
const { parallel, watch } = require('gulp');
const copy = require('recursive-copy');
const del = require('del');
const path = require('path');
const through = require('through2');
async function cleanReadmes(done) {
await del('./docs/components');
done();
}
function copyReadmes(done) {
copy('./src/components', './docs/components', {
filter: '**/readme.md',
overwrite: true,
rename: filePath => path.dirname(filePath) + path.extname(filePath),
transform: function(src, dest, stats) {
return through(function(chunk, enc, done) {
// Remove footer break
const output = chunk.toString().replace(/\n----------------------------------------------\n/g, '');
done(null, output);
});
}
});
done();
}
function watchReadmes() {
return watch('src/components/**/*.md', copyReadmes);
}
exports.clean = parallel(cleanReadmes);
exports.copy = parallel(copyReadmes);
exports.watch = parallel(watchReadmes);
exports.default = parallel(exports.clean, exports.copy, exports.watch);

3708
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -17,7 +17,7 @@
"scripts": {
"build": "stencil build --docs",
"install": "node postinstall.js",
"start": "concurrently --kill-others \"npm run stencil\" \"gulp\" \"npm run docsify\"",
"start": "concurrently --kill-others \"npm run stencil\" \"npm run docsify\"",
"stencil": "stencil build --dev --docs --watch --no-open",
"docsify": "docsify serve ./docs --open",
"test": "stencil test --spec --e2e",
@@ -33,7 +33,6 @@
"del": "^5.1.0",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.19.0",
"gulp": "^4.0.2",
"recursive-copy": "^2.0.10",
"through2": "^3.0.1",
"workbox-build": "4.3.1"
@@ -42,7 +41,7 @@
"dependencies": {
"@popperjs/core": "^2.1.1",
"@sphinxxxx/color-conversion": "^2.2.2",
"@stencil/core": "^1.12.7",
"@stencil/core": "^1.13.0",
"@stencil/sass": "^1.1.1",
"color": "^3.1.2",
"feather-icons": "^4.28.0",

7
stencil.config.ts
View File

@@ -17,10 +17,17 @@ export const config: Config = {
type: 'dist',
esmLoaderPath: '../loader'
},
{
type: 'dist-custom-elements-bundle'
},
{
type: 'docs-readme',
footer: ''
},
{
type: 'docs-json',
file: './dist/components.json'
},
{
type: 'www',
serviceWorker: undefined // disable service workers