mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rework build and demos
This commit is contained in:
Cory LaViska
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,7 @@
|
||||
src/components/*/readme.md
|
||||
src/components/icon/icons
|
||||
docs/assets/dist
|
||||
docs/assets/data/custom.json
|
||||
|
||||
dist/
|
||||
www/
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
- Overview
|
||||
- [Getting Started](/)
|
||||
- [Installation](/installation.md)
|
||||
- [Customizing](/customizing.md)
|
||||
- [Getting Started](/overview/getting-started.md)
|
||||
- [Installation](/overview/installation.md)
|
||||
- [Customizing](/overview/customizing.md)
|
||||
|
||||
- Design Tokens
|
||||
- [Typography](/tokens/typography.md)
|
||||
@@ -39,4 +39,4 @@
|
||||
- [HTML + JS](/frameworks/html-js.md)
|
||||
- [React](/frameworks/react.md)
|
||||
- [Vue](/frameworks/vue.md)
|
||||
- [Angular](/frameworks/angular.md)
|
||||
- [Angular](/frameworks/angular.md)
|
||||
@@ -1 +0,0 @@
|
||||
../../dist
|
||||
104
docs/assets/plugins/code-block/code-block.css
Normal file
104
docs/assets/plugins/code-block/code-block.css
Normal file
@@ -0,0 +1,104 @@
|
||||
.code-block {
|
||||
position: relative;
|
||||
background-color: var(--sl-color-gray-95);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.code-block__preview {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: white;
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.code-block__preview * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.code-block__resizer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
color: var(--sl-color-gray-40);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
border-left: solid 1px var(--sl-color-gray-90);
|
||||
border-top-right-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
.code-block__source {
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-block__source,
|
||||
.code-block__source code {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.code-block__source .docsify-copy-code-button {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.code-block--expanded .code-block__source {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code-block__toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background: var(--sl-color-white);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
color: var(--sl-color-gray-40);
|
||||
cursor: pointer;
|
||||
transition: 250ms background-color;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.code-block__toggle:hover,
|
||||
.code-block__toggle:active {
|
||||
border-color: var(--sl-color-primary-80);
|
||||
background-color: var(--sl-color-primary-95);
|
||||
color: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
.code-block__toggle:focus {
|
||||
outline: none;
|
||||
border-color: var(--sl-color-primary-50);
|
||||
background-color: var(--sl-color-primary-95);
|
||||
color: var(--sl-color-primary-50);
|
||||
box-shadow: var(--sl-focus-ring-box-shadow);
|
||||
}
|
||||
|
||||
.code-block__toggle sl-icon {
|
||||
margin-left: 0.25rem;
|
||||
transition: 250ms transform;
|
||||
}
|
||||
|
||||
.code-block--expanded .code-block__toggle sl-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -7,7 +7,13 @@
|
||||
|
||||
function runScript(script) {
|
||||
const newScript = document.createElement('script');
|
||||
newScript.appendChild(document.createTextNode(script.innerHTML));
|
||||
newScript.appendChild(
|
||||
document.createTextNode(`
|
||||
(() => {
|
||||
${script.innerHTML}
|
||||
})();
|
||||
`)
|
||||
);
|
||||
script.parentNode.replaceChild(newScript, script);
|
||||
}
|
||||
|
||||
@@ -62,7 +68,7 @@
|
||||
toggle.classList.add('code-block__toggle');
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
toggle.setAttribute('aria-controls', preId);
|
||||
toggle.innerHTML = '<sl-icon name="chevron-down"></sl-icon>';
|
||||
toggle.innerHTML = 'Source <sl-icon name="chevron-down"></sl-icon>';
|
||||
|
||||
codeBlock.prepend(preview);
|
||||
codeBlock.append(toggle);
|
||||
@@ -113,7 +119,8 @@
|
||||
|
||||
// Expand and collapse code blocks
|
||||
document.addEventListener('click', event => {
|
||||
if (event.target.closest('.code-block__toggle')) {
|
||||
const toggle = event.target.closest('.code-block__toggle');
|
||||
if (toggle) {
|
||||
const codeBlock = event.target.closest('.code-block');
|
||||
codeBlock.classList.toggle('code-block--expanded');
|
||||
event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-block--expanded'));
|
||||
@@ -1,5 +1,5 @@
|
||||
(() => {
|
||||
let componentMetadata;
|
||||
let metadataStore;
|
||||
|
||||
function createPropsTable(props) {
|
||||
const table = document.createElement('table');
|
||||
@@ -167,19 +167,37 @@
|
||||
|
||||
function getMetadata() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (componentMetadata) {
|
||||
return resolve(componentMetadata);
|
||||
// Simple caching to prevent multiple XHR requests
|
||||
if (metadataStore) {
|
||||
return resolve(metadataStore);
|
||||
}
|
||||
|
||||
return fetch('/assets/dist/components.json')
|
||||
.then(res => res.json())
|
||||
Promise.all([
|
||||
fetch('/assets/dist/components.json').then(res => res.json()),
|
||||
fetch('/assets/data/custom.json').then(res => res.json())
|
||||
])
|
||||
.then(res => ({
|
||||
component: res[0],
|
||||
custom: res[1]
|
||||
}))
|
||||
.then(data => {
|
||||
componentMetadata = data;
|
||||
resolve(componentMetadata);
|
||||
});
|
||||
metadataStore = data;
|
||||
resolve(metadataStore);
|
||||
})
|
||||
.catch(err => console.error(err));
|
||||
});
|
||||
}
|
||||
|
||||
function getDocsTagsObject(docsTags) {
|
||||
let tags = {};
|
||||
|
||||
for (const tag of docsTags) {
|
||||
tags[tag.name] = tag.text;
|
||||
}
|
||||
|
||||
return tags;
|
||||
}
|
||||
|
||||
if (!window.$docsify) {
|
||||
throw new Error('Docsify must be loaded before installing this plugin.');
|
||||
}
|
||||
@@ -188,12 +206,49 @@
|
||||
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];
|
||||
// Handle [component-header] tags
|
||||
content = content.replace(/\[component-header:([a-z-]+)\]/g, (match, tag) => {
|
||||
const data = metadata.component.components.filter(data => data.tag === tag)[0];
|
||||
let result = '';
|
||||
|
||||
if (!data) {
|
||||
throw new Error('Component not found in metadata: ' + tag);
|
||||
console.error('Component not found in metadata: ' + tag);
|
||||
next(content);
|
||||
}
|
||||
|
||||
const tags = getDocsTagsObject(data.docsTags);
|
||||
|
||||
if (tags && tags.status) {
|
||||
result += `
|
||||
<div class="component-header">
|
||||
<div class="component-header__tag">
|
||||
<code><${tag}></code>
|
||||
</div>
|
||||
|
||||
<div class="component-header__info">
|
||||
<small class="badge badge--since">
|
||||
Since ${tags.since || '?'}
|
||||
</small>
|
||||
|
||||
<small class="component-header__status badge badge--${tags.status.replace(/\s/g, '-')}">
|
||||
${tags.status}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return result.replace(/^ +| +$/gm, '');
|
||||
});
|
||||
|
||||
// Handle [component-metadata] tags
|
||||
content = content.replace(/\[component-metadata:([a-z-]+)\]/g, (match, tag) => {
|
||||
const data = metadata.component.components.filter(data => data.tag === tag)[0];
|
||||
let result = '';
|
||||
|
||||
if (!data) {
|
||||
console.error('Component not found in metadata: ' + tag);
|
||||
next(content);
|
||||
}
|
||||
|
||||
if (data.props.length) {
|
||||
@@ -244,5 +299,15 @@
|
||||
|
||||
next(content);
|
||||
});
|
||||
|
||||
hook.doneEach(async function (html, next) {
|
||||
const metadata = await getMetadata();
|
||||
const version = metadata.custom.version;
|
||||
|
||||
// Replace <docs-version> with version number
|
||||
[...document.body.querySelectorAll('docs-version')].map(el => el.replaceWith(version));
|
||||
|
||||
next(html);
|
||||
});
|
||||
});
|
||||
})();
|
||||
52
docs/assets/styles/demos.css
Normal file
52
docs/assets/styles/demos.css
Normal file
@@ -0,0 +1,52 @@
|
||||
/* Color demo */
|
||||
.color-demo {
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
|
||||
/* Border radius demo */
|
||||
.border-radius-demo {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
/* Transition demo */
|
||||
.transition-demo {
|
||||
position: relative;
|
||||
background: var(--sl-color-gray-90);
|
||||
width: 8rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.transition-demo::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--sl-color-primary-50);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition-duration: inherit;
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
.transition-demo:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Spacing demo */
|
||||
.spacing-demo {
|
||||
width: 100px;
|
||||
background: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
/* Elevation dmeo */
|
||||
.elevation-demo {
|
||||
background: var(--sl-color-white);
|
||||
border-radius: 3px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
@@ -1,426 +1,184 @@
|
||||
:root {
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-transition: all 250ms ease-out;
|
||||
--base-font-size: 16px;
|
||||
--base-font-weight: 400;
|
||||
--code-inline-background: rgba(0, 0, 0, 0.04);
|
||||
--code-tab-size: 2;
|
||||
--content-max-width: 58rem;
|
||||
--copycode-background: var(--sl-color-primary-50);
|
||||
--cover-background-blend-mode: ;
|
||||
--cover-background-color: var(--sl-color-gray-20);
|
||||
--cover-background-image: none;
|
||||
--heading-font-weight: 400;
|
||||
--link-color-hover: var(--sl-color-primary-50);
|
||||
--link-color: var(--sl-color-primary-50);
|
||||
--search-input-border-color: transparent;
|
||||
--search-input-background-color: var(--sl-color-white);
|
||||
--theme-hue: 180;
|
||||
--theme-saturation: 65%;
|
||||
|
||||
--sidebar-width: 18rem;
|
||||
--sidebar-background: var(--sl-color-white);
|
||||
--sidebar-border-color: var(--sl-color-gray-90);
|
||||
--sidebar-nav-link-before-content: '';
|
||||
--sidebar-padding: 0;
|
||||
--sidebar-toggle-background: var(--sidebar-background);
|
||||
--sidebar-toggle-border-color: var(--sidebar-border-color);
|
||||
--sidebar-toggle-border-width: 1px;
|
||||
--sidebar-nav-link-color--active: var(--sl-color-primary-50);
|
||||
--sidebar-nav-pagelink-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
|
||||
--sidebar-nav-pagelink-background-image--active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
|
||||
--sidebar-nav-pagelink-background-image--loaded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
|
||||
--sidebar-nav-pagelink-background-image--collapse: var(--sidebar-nav-pagelink-background-image);
|
||||
--sidebar-nav-link-before-content-l2: '';
|
||||
--sidebar-nav-link-before-content-l3: '•';
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 16px;
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right-color: var(--sl-color-gray-90);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--sidebar-width);
|
||||
transition: var(--sidebar-transition);
|
||||
}
|
||||
|
||||
body.close .sidebar {
|
||||
transform: translateX(calc(-1 * var(--sidebar-width)));
|
||||
}
|
||||
|
||||
.sidebar .app-name {
|
||||
order: 1;
|
||||
text-align: left;
|
||||
padding: 1rem 1rem 0.25rem 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-nav {
|
||||
order: 3;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.sidebar-toggle,
|
||||
body.close .sidebar-toggle {
|
||||
top: 2rem;
|
||||
left: calc(var(--sidebar-width) - 1px);
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
bottom: auto;
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background: var(--sl-color-white);
|
||||
border-left-color: var(--sl-color-white);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: var(--sidebar-transition);
|
||||
}
|
||||
|
||||
body.close .sidebar-toggle {
|
||||
transform: translateX(calc(-1 * var(--sidebar-width)));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.sidebar-toggle {
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
body.close .sidebar-toggle {
|
||||
padding: 10px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
body.close .sidebar {
|
||||
transform: translateX(var(--sidebar-width));
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle .sidebar-toggle-button {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
border-color: var(--sl-color-gray-80);
|
||||
border-left-color: var(--sl-color-white);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-toggle:focus,
|
||||
body.close .sidebar-toggle:focus {
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
box-shadow: var(--sl-focus-ring-box-shadow);
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover .sidebar-toggle-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar .search {
|
||||
order: 2;
|
||||
padding: 15px;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar .search input {
|
||||
border: solid 1px var(--sl-input-border-color);
|
||||
/** Badges */
|
||||
.badge {
|
||||
font-size: var(--sl-font-size-x-small);
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
color: var(--sl-color-white);
|
||||
background-color: var(--sl-color-gray-40);
|
||||
border-radius: 3px;
|
||||
padding: 0 var(--sl-spacing-small);
|
||||
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
padding: 0.125em 0.5em;
|
||||
}
|
||||
|
||||
.sidebar .search input:hover {
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
.badge--ready {
|
||||
background-color: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
.sidebar .search input:focus {
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
box-shadow: var(--sl-focus-ring-box-shadow);
|
||||
.badge--experimental {
|
||||
background: var(--sl-color-warning-50);
|
||||
}
|
||||
|
||||
.sidebar .search .clear-button svg {
|
||||
transform: scale(0.75);
|
||||
.badge--planned {
|
||||
background: var(--sl-color-info-50);
|
||||
}
|
||||
|
||||
.sidebar .search a {
|
||||
display: block;
|
||||
.badge--deprecated {
|
||||
background-color: var(--sl-color-danger-50);
|
||||
}
|
||||
|
||||
.sidebar .search .results-panel {
|
||||
margin-top: 1.5rem;
|
||||
/* Sidebar */
|
||||
.sidebar .app-name,
|
||||
.sidebar .search,
|
||||
.sidebar .sidebar-nav {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar ul li.active > a {
|
||||
border-right: none;
|
||||
.sidebar-toggle-button {
|
||||
border-left: solid 1px var(--sidebar-background) !important;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.content em {
|
||||
color: inherit;
|
||||
.sidebar .search input[type='search'] {
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) transparent, inset 0 0 0 1px var(--sl-input-border-color);
|
||||
border-radius: 9999px;
|
||||
padding-right: 2.5rem;
|
||||
margin: 0 1.25rem;
|
||||
transition: var(--sl-transition-fast) box-shadow;
|
||||
}
|
||||
|
||||
.content blockquote p {
|
||||
font-weight: normal;
|
||||
.sidebar .search input[type='search']:focus {
|
||||
box-shadow: var(--sl-focus-ring-box-shadow), inset 0 0 0 1px var(--sl-input-border-color-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.content table {
|
||||
font-size: 14px;
|
||||
.sidebar .clear-button {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.sidebar .clear-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sidebar-nav > ul > li {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
/* Component headers */
|
||||
.component-header {
|
||||
border-bottom: solid 1px var(--sl-color-gray-90);
|
||||
padding-bottom: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.component-header__tag {
|
||||
border-bottom: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0.75rem 0 0.25rem 0 !important;
|
||||
}
|
||||
|
||||
.component-header__tag code {
|
||||
background: none !important;
|
||||
color: var(--sl-color-gray-50) !important;
|
||||
font-size: var(--sl-font-size-large);
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.component-header__info {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Lead sentences that occur immediately after the header */
|
||||
.component-header + p {
|
||||
font-size: var(--sl-font-size-x-large);
|
||||
line-height: 1.6;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content table tr {
|
||||
border-top: solid 1px var(--sl-color-gray-90);
|
||||
}
|
||||
|
||||
.content table tr:nth-child(2n) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.content table thead tr {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.content table thead th {
|
||||
text-align: left;
|
||||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
}
|
||||
|
||||
.content table th,
|
||||
.content table td {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content table th:first-child,
|
||||
.content table td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.content table th:last-child,
|
||||
.content table td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.content p.tip,
|
||||
.content tr:nth-child(2n) {
|
||||
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
|
||||
}
|
||||
|
||||
.content .docsify-copy-code-button {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 14px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
/* In component pages we have:
|
||||
*
|
||||
* .component-header
|
||||
* p (leading sentence)
|
||||
* p (optional secondary sentence)
|
||||
* .code-block (main example)
|
||||
*
|
||||
* So if we have this structure, space out the code block a bit to make it appear on its own.
|
||||
*/
|
||||
.component-header + p + .code-block,
|
||||
.component-header + p + p + .code-block {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.content pre,
|
||||
.content pre > code {
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--sl-color-gray-20);
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.content pre::after {
|
||||
.markdown-section pre .token.comment {
|
||||
color: var(--sl-color-gray-70);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.content code {
|
||||
background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%, 0.075);
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 0.875em;
|
||||
color: var(--sl-color-gray-20);
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.content h1 code,
|
||||
.content h2 code,
|
||||
.content h3 code,
|
||||
.content h4 code,
|
||||
.content h5 code,
|
||||
.content h6 code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content code .token {
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.content code .token.attr-value,
|
||||
.content code .token.control,
|
||||
.content code .token.directive,
|
||||
.content code .token.unit {
|
||||
color: var(--sl-color-warning-50);
|
||||
}
|
||||
|
||||
.content code .token.attr-name,
|
||||
.content code .token.tag,
|
||||
.content code .token.selector,
|
||||
.content code .token.function,
|
||||
.content code .token.keyword {
|
||||
color: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
.content code .token.string {
|
||||
.markdown-section pre .token.string,
|
||||
.markdown-section pre .token.attr-name,
|
||||
.markdown-section pre .token.selector {
|
||||
color: var(--sl-color-success-40);
|
||||
}
|
||||
|
||||
.content code .token.parameter,
|
||||
.content code .token.property {
|
||||
.markdown-section pre .token.keyword,
|
||||
.markdown-section pre .token.tag,
|
||||
.markdown-section pre .token.property {
|
||||
color: #b10dc9; /* purple */
|
||||
}
|
||||
|
||||
.markdown-section pre .token.boolean,
|
||||
.markdown-section pre .token.number {
|
||||
color: #f012be; /* fuschia */
|
||||
}
|
||||
|
||||
.markdown-section pre .token.atrule,
|
||||
.markdown-section pre .token.function,
|
||||
.markdown-section pre .token.attr-value,
|
||||
.markdown-section pre .token.value,
|
||||
.markdown-section pre .token.class-name {
|
||||
color: var(--sl-color-warning-50);
|
||||
}
|
||||
|
||||
.content code .token.punctuation {
|
||||
color: var(--sl-color-gray-40);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.code-block {
|
||||
position: relative;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--sl-color-gray-95);
|
||||
}
|
||||
|
||||
.code-block__preview {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: var(--sl-color-white);
|
||||
min-width: 200px;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.code-block__preview * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.code-block__resizer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
color: var(--sl-color-gray-60);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
border-left: solid 1px var(--sl-color-gray-90);
|
||||
border-top-right-radius: var(--sl-border-radius-small);
|
||||
box-shadow: var(--sl-shadow-1);
|
||||
cursor: ew-resize;
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
pre.code-block__source {
|
||||
background: var(--sl-color-gray-95);
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
pre.code-block__source > code {
|
||||
background-color: var(--sl-color-gray-95);
|
||||
}
|
||||
|
||||
.code-block__source .docsify-copy-code-button {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.code-block--expanded .code-block__source {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code-block__toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: var(--sl-color-white);
|
||||
font: inherit;
|
||||
color: var(--sl-color-gray-60);
|
||||
cursor: pointer;
|
||||
transition: 250ms background-color;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.code-block__toggle:hover {
|
||||
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 98%);
|
||||
}
|
||||
|
||||
.code-block__toggle:active {
|
||||
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 96%);
|
||||
}
|
||||
|
||||
.code-block__toggle:focus {
|
||||
outline: none;
|
||||
color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-50);
|
||||
box-shadow: var(--sl-focus-ring-box-shadow);
|
||||
}
|
||||
|
||||
.code-block--expanded .code-block__toggle sl-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.content img.logo {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* Color demo */
|
||||
.color-demo {
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
|
||||
/* Border radius demo */
|
||||
.border-radius-demo {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
/* Transition demo */
|
||||
.transition-demo {
|
||||
position: relative;
|
||||
background: var(--sl-color-gray-90);
|
||||
width: 8rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.transition-demo::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--sl-color-primary-50);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition-duration: inherit;
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
.transition-demo:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Spacing demo */
|
||||
.spacing-demo {
|
||||
width: 100px;
|
||||
background: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
/* Elevation dmeo */
|
||||
.elevation-demo {
|
||||
border-radius: 3px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# Alert
|
||||
|
||||
[component-header:sl-alert]
|
||||
|
||||
Alerts...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" open>
|
||||
Nothing fancy here, just a simple alert.
|
||||
@@ -11,7 +17,9 @@
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
## Types
|
||||
## Examples
|
||||
|
||||
### Types
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" open closable>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
# 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.
|
||||
[component-header:sl-button]
|
||||
|
||||
Buttons represent actions that are available to the user.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" tabindex>Default</sl-button>
|
||||
@@ -11,7 +15,11 @@ Good ol' buttons. They're usually the first thing I look at when reviewing a com
|
||||
<sl-button type="danger">Danger</sl-button>
|
||||
```
|
||||
|
||||
## Pill
|
||||
[component-metadata:sl-button]
|
||||
|
||||
## Examples
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` prop to give buttons rounded edges.
|
||||
|
||||
@@ -24,7 +32,7 @@ Use the `pill` prop to give buttons rounded edges.
|
||||
<sl-button type="danger" pill>Danger</sl-button>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
### Sizes
|
||||
|
||||
Use the `size` prop to change a button's size.
|
||||
|
||||
@@ -34,7 +42,7 @@ Use the `size` prop to change a button's size.
|
||||
<sl-button size="large">Large</sl-button>
|
||||
```
|
||||
|
||||
## Circle
|
||||
### Circle
|
||||
|
||||
Use the `circle` prop to create circular icon buttons.
|
||||
|
||||
@@ -44,7 +52,7 @@ Use the `circle` prop to create circular icon buttons.
|
||||
<sl-button type="default" size="large" circle><sl-icon name="settings"></sl-icon></sl-button>
|
||||
```
|
||||
|
||||
## Text
|
||||
### Text
|
||||
|
||||
Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders.
|
||||
|
||||
@@ -54,7 +62,7 @@ Use `type="text"` to create text buttons, which share the same size as regular b
|
||||
<sl-button type="text" size="large">Text</sl-button>
|
||||
```
|
||||
|
||||
## Block
|
||||
### Block
|
||||
|
||||
Block buttons can be created by setting the button's width to `100%`.
|
||||
|
||||
@@ -64,7 +72,7 @@ Block buttons can be created by setting the button's width to `100%`.
|
||||
<sl-button type="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
|
||||
```
|
||||
|
||||
## Icons
|
||||
### Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
@@ -84,7 +92,7 @@ Use the `prefix` and `suffix` slots to add icons.
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
## Caret
|
||||
### Caret
|
||||
|
||||
Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
|
||||
|
||||
@@ -94,7 +102,7 @@ Use the `caret` prop to add a dropdown indicator when a button will trigger a dr
|
||||
<sl-button size="large" caret>Large</sl-button>
|
||||
```
|
||||
|
||||
## Loading
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
|
||||
|
||||
@@ -107,7 +115,7 @@ Use the `loading` prop to make a button busy. The width will remain the same as
|
||||
<sl-button type="danger" loading>Danger</sl-button>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable a button.
|
||||
|
||||
@@ -120,5 +128,3 @@ Use the `disabled` prop to disable a button.
|
||||
<sl-button type="danger" disabled>Danger</sl-button>
|
||||
```
|
||||
|
||||
[component-metadata:sl-button]
|
||||
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# Checkbox
|
||||
|
||||
[component-header:sl-checkbox]
|
||||
|
||||
Checkboxes...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-checkbox>Default</sl-checkbox><br><br>
|
||||
<sl-checkbox checked>Checked</sl-checkbox><br><br>
|
||||
@@ -7,4 +13,4 @@
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
|
||||
```
|
||||
|
||||
[component-metadata:sl-checkbox]
|
||||
[component-metadata:sl-checkbox]
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
# Color Picker
|
||||
|
||||
Color pickers give users a way to select a color. By default, they appear in a dropdown.
|
||||
[component-header:sl-checkbox]
|
||||
|
||||
Color pickers give users a way to select a color.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity></sl-color-picker>
|
||||
```
|
||||
|
||||
Color pickers can also be rendered inline.
|
||||
[component-metadata:sl-checkbox]
|
||||
|
||||
## Examples
|
||||
|
||||
### Inline
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity inline></sl-color-picker>
|
||||
```
|
||||
|
||||
[component-metadata:sl-color-picker]
|
||||
@@ -1,5 +1,11 @@
|
||||
# Dialog
|
||||
|
||||
[component-header:sl-dialog]
|
||||
|
||||
Dialogs...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" id="dialog-1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
@@ -20,4 +26,4 @@
|
||||
</script>
|
||||
```
|
||||
|
||||
[component-metadata:sl-dialog]
|
||||
[component-metadata:sl-dialog]
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# Dropdown
|
||||
|
||||
[component-header:sl-dropdown]
|
||||
|
||||
Dropdowns...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
@@ -21,6 +27,12 @@
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
[component-metadata:sl-dropdown]
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
@@ -33,6 +45,8 @@
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
### Scrolling
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Scrolling Menu</sl-button>
|
||||
@@ -57,6 +71,4 @@
|
||||
<sl-dropdown-item>Item 19</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 20</sl-dropdown-item>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
[component-metadata:sl-dropdown]
|
||||
```
|
||||
@@ -9,8 +9,10 @@
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css" />
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
<link rel="stylesheet" href="/assets/styles/demos.css" />
|
||||
<link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
|
||||
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
||||
|
||||
<!-- Import Shoelace -->
|
||||
@@ -30,8 +32,9 @@
|
||||
errorText: 'Failed to copy',
|
||||
successText: 'Copied'
|
||||
},
|
||||
coverpage: false,
|
||||
executeScript: true,
|
||||
homepage: 'home.md',
|
||||
homepage: 'overview/getting-started.md',
|
||||
loadSidebar: true,
|
||||
logo: '/assets/images/wordmark.svg',
|
||||
maxLevel: 3,
|
||||
@@ -40,7 +43,7 @@
|
||||
notFoundPage: '404.md',
|
||||
pagination: {
|
||||
previousText: 'Previous',
|
||||
nextText: 'Next up',
|
||||
nextText: 'Next',
|
||||
crossChapter: true,
|
||||
crossChapterText: false
|
||||
},
|
||||
@@ -56,16 +59,21 @@
|
||||
hideOtherSidebarContent: true,
|
||||
namespace: 'shoelace-docs'
|
||||
},
|
||||
themeable: {
|
||||
readyTransition: true, // default
|
||||
responsiveTables: true // default
|
||||
},
|
||||
themeColor: '#049dff'
|
||||
};
|
||||
</script>
|
||||
<script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
|
||||
<script src="https://unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
<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="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>
|
||||
<script src="/assets/plugins/code-block/code-block.js"></script>
|
||||
<script src="/assets/plugins/metadata/metadata.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<img class="logo" src="/assets/images/wordmark.svg" alt="Shoelace" data-no-zoom>
|
||||
<img id="top" class="logo" src="/assets/images/wordmark.svg" alt="Shoelace" data-no-zoom style="max-width: 24rem;">
|
||||
|
||||
👟 _A forward-thinking web component library for desktop and mobile._
|
||||
_A forward-thinking web component library for desktop and mobile._
|
||||
|
||||
<span class="badge"><docs-version /></span>
|
||||
|
||||
---
|
||||
|
||||
@@ -53,8 +55,6 @@ Shoelace is built for modern browsers. If you need to support IE11 or pre-Chromi
|
||||
|
||||
Although Web Components can (to some degree) be polyfilled for older browsers, supporting them is outside the scope of this project. If you're using Shoelace in a legacy browser, things will probably not work the way they're intended to.
|
||||
|
||||
!> Shoelace makes use of the `::part` selector for styling, which isn't supported in Safari yet. However, it's present in Safari 13.1 beta so it should be available very soon.
|
||||
|
||||
## Attribution
|
||||
|
||||
- Components are compiled by [Stencil](https://stenciljs.com/)
|
||||
@@ -1,19 +0,0 @@
|
||||
# Usage
|
||||
|
||||
TODO
|
||||
|
||||
## React
|
||||
|
||||
TODO
|
||||
|
||||
## Vue
|
||||
|
||||
TODO (see utilities/vue.ts)
|
||||
|
||||
## Angular
|
||||
|
||||
TODO
|
||||
|
||||
## Vanilla HTML + JS
|
||||
|
||||
TODO
|
||||
41
gulpfile.js
Normal file
41
gulpfile.js
Normal file
@@ -0,0 +1,41 @@
|
||||
const { version } = require('./package.json');
|
||||
const { series, task, watch } = require('gulp');
|
||||
const copy = require('recursive-copy');
|
||||
const del = require('del');
|
||||
const fs = require('fs').promises;
|
||||
const mkdirp = require('mkdirp');
|
||||
const path = require('path');
|
||||
|
||||
// Removes all generated files from the docs folder
|
||||
async function cleanFiles(cb) {
|
||||
await del(['./docs/assets/data/custom.json', './docs/assets/dist']);
|
||||
cb();
|
||||
}
|
||||
|
||||
// Copies custom data and dist to docs/assets
|
||||
async function copyFiles(cb) {
|
||||
await mkdirp('./dist');
|
||||
await copy('./dist', './docs/assets/dist', { overwrite: true });
|
||||
cb();
|
||||
}
|
||||
|
||||
// Copies custom data and dist to docs/assets and watches for changes
|
||||
function watchFiles(cb) {
|
||||
watch(`./dist/**/*`, copyFiles);
|
||||
cb();
|
||||
}
|
||||
|
||||
async function generateCustomData(cb) {
|
||||
const filename = './docs/assets/data/custom.json';
|
||||
const dir = path.dirname(filename);
|
||||
const customData = JSON.stringify({ version }, null, 2);
|
||||
|
||||
await mkdirp(dir);
|
||||
await fs.writeFile(filename, customData, 'utf8');
|
||||
|
||||
cb();
|
||||
}
|
||||
|
||||
task('clean', cleanFiles);
|
||||
task('copy', series(generateCustomData, copyFiles));
|
||||
task('watch', series(generateCustomData, copyFiles, watchFiles));
|
||||
3734
package-lock.json
generated
3734
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "shoelace",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0-beta.1",
|
||||
"description": "A forward-thinking library of Web Components.",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
@@ -15,15 +15,14 @@
|
||||
"loader/"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "stencil build --docs",
|
||||
"install": "node postinstall.js",
|
||||
"start": "concurrently --kill-others \"npm run stencil\" \"npm run docsify\"",
|
||||
"stencil": "stencil build --dev --docs --watch --no-open",
|
||||
"docsify": "docsify serve ./docs --open",
|
||||
"start": "concurrently --kill-others \"npm run dev\" \"gulp watch\" \"npm run docs\"",
|
||||
"dev": "stencil build --dev --docs --watch --no-open",
|
||||
"build": "stencil build --docs && gulp copy",
|
||||
"docs": "docsify serve ./docs --open",
|
||||
"lint": "eslint src/**/*{.ts,.tsx}",
|
||||
"test": "stencil test --spec --e2e",
|
||||
"test.watch": "stencil test --spec --e2e --watchAll",
|
||||
"generate": "stencil generate",
|
||||
"lint": "eslint src/**/*{.ts,.tsx}"
|
||||
"generate": "stencil generate"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@stencil/eslint-plugin": "^0.3.1",
|
||||
@@ -33,6 +32,8 @@
|
||||
"del": "^5.1.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-react": "^7.19.0",
|
||||
"gulp": "^4.0.2",
|
||||
"mkdirp": "^1.0.4",
|
||||
"recursive-copy": "^2.0.10",
|
||||
"through2": "^3.0.1",
|
||||
"workbox-build": "4.3.1"
|
||||
|
||||
@@ -2,6 +2,9 @@ import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Wat
|
||||
import { KeyboardDetector } from '../../utilities/keyboard-detector';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The alert's content.
|
||||
* @slot icon - An icon to show in the alert.
|
||||
* @slot close-icon - An icon to use in lieu of the default close icon.
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The button's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the button.
|
||||
* @slot suffix - Used to append an icon or similar element to the button.
|
||||
|
||||
@@ -2,7 +2,12 @@ import { Component, Event, EventEmitter, Method, Prop, State, Watch, h } from '@
|
||||
|
||||
let id = 0;
|
||||
|
||||
/** @slot - The checkbox's label. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The checkbox's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-checkbox',
|
||||
|
||||
@@ -3,6 +3,11 @@ import color from 'color';
|
||||
import { clamp } from '../../utilities/math';
|
||||
import { throttle } from '../../utilities/throttle';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-color-picker',
|
||||
styleUrl: 'color-picker.scss',
|
||||
|
||||
@@ -5,6 +5,9 @@ import { lockBodyScrolling, unlockBodyScrolling } from '../../utilities/scroll';
|
||||
let id = 0;
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The dialog's content.
|
||||
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
|
||||
*/
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-dropdown-divider',
|
||||
styleUrl: 'dropdown-divider.scss',
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The dropdown item's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the dropdown item.
|
||||
* @slot suffix - Used to append an icon or similar element to the dropdown item.
|
||||
|
||||
@@ -5,6 +5,9 @@ import Popover from '../../utilities/popover';
|
||||
let id = 0;
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.
|
||||
* @slot - The dropdown's menu items.
|
||||
*/
|
||||
|
||||
@@ -4,6 +4,11 @@ import { requestIcon } from './request';
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-icon',
|
||||
styleUrl: 'icon.scss',
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot prefix - Used to prepend an icon or similar element to the input.
|
||||
* @slot suffix - Used to append an icon or similar element to the input.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { Component, Prop, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - A label to show inside the indicator.
|
||||
*/
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { Component, Host, Prop, Watch, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-progress-ring',
|
||||
styleUrl: 'progress-ring.scss',
|
||||
|
||||
@@ -2,7 +2,12 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from
|
||||
|
||||
let id = 0;
|
||||
|
||||
/** @slot - The radio's label. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The radio's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-radio',
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-range',
|
||||
styleUrl: 'range.scss',
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { Component, Prop, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-spinner',
|
||||
styleUrl: 'spinner.scss',
|
||||
|
||||
@@ -2,7 +2,13 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil
|
||||
|
||||
let id = 0;
|
||||
|
||||
/** @slot - The switch's label. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
*
|
||||
* @slot - The switch's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-switch',
|
||||
|
||||
@@ -4,6 +4,9 @@ import { getOffset } from '../../utilities/offset';
|
||||
import { scrollIntoView } from '../../utilities/scroll';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot nav - Used for grouping tabs in the tabs.
|
||||
* @slot - Used for grouping tab panels in the tabs.
|
||||
*/
|
||||
|
||||
@@ -2,7 +2,12 @@ import { Component, Element, Host, Prop, h } from '@stencil/core';
|
||||
|
||||
let id = 0;
|
||||
|
||||
/** @slot - The tab panel's content. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The tab panel's content.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-tab-panel',
|
||||
|
||||
@@ -2,7 +2,12 @@ import { Component, Element, Host, Method, Prop, h } from '@stencil/core';
|
||||
|
||||
let id = 0;
|
||||
|
||||
/** @slot - The tab's label. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The tab's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-tab',
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { Component, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-textarea',
|
||||
styleUrl: 'textarea.scss',
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
|
||||
import tippy from 'tippy.js';
|
||||
|
||||
/** @slot - The tooltip's content. */
|
||||
/**
|
||||
* @since 1.0.0
|
||||
* @status ready
|
||||
*
|
||||
* @slot - The tooltip's content.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-tooltip',
|
||||
|
||||
Reference in New Issue
Block a user