mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Cory LaViska
@@ -1,43 +0,0 @@
|
||||
import components from './components.js';
|
||||
|
||||
const by = {
|
||||
attribute: {},
|
||||
slot: {},
|
||||
event: {},
|
||||
method: {},
|
||||
cssPart: {},
|
||||
cssProperty: {},
|
||||
};
|
||||
|
||||
function getAll(component, type) {
|
||||
let prop = type + 's';
|
||||
if (type === 'cssProperty') {
|
||||
prop = 'cssProperties';
|
||||
}
|
||||
|
||||
return component[prop] ?? [];
|
||||
}
|
||||
|
||||
for (const componentName in components) {
|
||||
const component = components[componentName];
|
||||
|
||||
for (const type of ['attribute', 'slot', 'event', 'method', 'cssPart', 'cssProperty']) {
|
||||
for (const item of getAll(component, type)) {
|
||||
by[type][item.name] ??= [];
|
||||
by[type][item.name].push(component);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by descending number of components
|
||||
const sortByLengthDesc = (a, b) => b[1].length - a[1].length;
|
||||
|
||||
for (const key in by) {
|
||||
by[key] = sortObject(by[key], sortByLengthDesc);
|
||||
}
|
||||
|
||||
export default by;
|
||||
|
||||
function sortObject(obj, sorter) {
|
||||
return Object.fromEntries(Object.entries(obj).sort(sorter));
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
let url = new URL(location);
|
||||
const pushedURL = false;
|
||||
|
||||
const matchers = {
|
||||
default(textContent, query) {
|
||||
return textContent.includes(query);
|
||||
},
|
||||
|
||||
i(textContent, query) {
|
||||
return textContent.toLowerCase().includes(query.toLowerCase());
|
||||
},
|
||||
|
||||
regexp(textContent, query) {
|
||||
query.lastIndex = 0;
|
||||
return query.test(textContent);
|
||||
},
|
||||
};
|
||||
|
||||
matchers.iregexp = matchers.regexp; // i is baked into the query
|
||||
|
||||
function filterByName(value) {
|
||||
const previousFilter = url.searchParams.get('name') || '';
|
||||
url = new URL(location);
|
||||
|
||||
if (value) {
|
||||
const isRegexp = name_search_regexp.checked;
|
||||
const i = !name_search_i.checked;
|
||||
const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value;
|
||||
const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : '');
|
||||
const matcher = matchers[matcherId] ?? matchers.default;
|
||||
|
||||
for (const th of document.querySelectorAll('table tbody th:first-child')) {
|
||||
const tr = th.parentNode;
|
||||
const matches = matcher(th.textContent, query);
|
||||
tr.toggleAttribute('hidden', !matches);
|
||||
}
|
||||
url.searchParams.set('name', value);
|
||||
|
||||
if (matcherId) {
|
||||
url.searchParams.set('match', matcherId);
|
||||
} else {
|
||||
url.searchParams.delete('match');
|
||||
}
|
||||
} else {
|
||||
for (const tr of document.querySelectorAll('table tbody tr[hidden]')) {
|
||||
tr.removeAttribute('hidden');
|
||||
}
|
||||
url.searchParams.delete('name');
|
||||
url.searchParams.delete('match');
|
||||
}
|
||||
|
||||
if (value !== previousFilter) {
|
||||
history[pushedURL ? 'replaceState' : 'pushState'](null, '', url);
|
||||
}
|
||||
|
||||
// Update heading counts
|
||||
for (const h2 of document.querySelectorAll('h2:has(+ table)')) {
|
||||
const count = h2.querySelector('.count');
|
||||
if (!count) continue;
|
||||
const table = h2.nextElementSibling;
|
||||
const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length;
|
||||
count.textContent = visibleRows;
|
||||
const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`);
|
||||
if (outlineLink) {
|
||||
// Why not just = h2.textContent? To skip the "Jump to heading" link
|
||||
outlineLink.textContent = '';
|
||||
outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (name_search.value) {
|
||||
filterByName(name_search.value);
|
||||
}
|
||||
|
||||
name_search_group.addEventListener('input', e => filterByName(name_search.value));
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: Component Cheatsheet
|
||||
layout: docs
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
<style>
|
||||
table code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>
|
||||
This page lists every bit of syntax used by every Web Awesome component and which components share it.
|
||||
For these times when your memory is failing, or to simply explore the possibilities!
|
||||
</p>
|
||||
|
||||
<fieldset id="name_search_group">
|
||||
<legend>Filter by name</legend>
|
||||
<wa-input type="search" with-clear id="name_search"></wa-input>
|
||||
<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
|
||||
<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
|
||||
</fieldset>
|
||||
|
||||
<script>
|
||||
{
|
||||
let url = new URL(location);
|
||||
if (url.searchParams.get("name")) {
|
||||
name_search.value = url.searchParams.get("name");
|
||||
}
|
||||
|
||||
if (url.searchParams.get("match")) {
|
||||
let matcherId = url.searchParams.get("match");
|
||||
let caseSensitive = !matcherId.startsWith("i");
|
||||
let isRegexp = matcherId.endsWith("regexp");
|
||||
|
||||
customElements.whenDefined("wa-checkbox").then(async () => {
|
||||
await Promise.all([
|
||||
name_search_i.updateComplete,
|
||||
name_search_regexp.updateComplete,
|
||||
]);
|
||||
name_search_i.checked = caseSensitive;
|
||||
name_search_regexp.checked = isRegexp;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/docs/components/cheatsheet.js"></script>
|
||||
|
||||
{% for type, all in componentsBy -%}
|
||||
{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
|
||||
<h2 id="{{ typeTitle | slugify }}">
|
||||
All <span class="count">{{ (all | keys).length }}</span>
|
||||
{{ typeTitle }}
|
||||
</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Components</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for name, thingComponents in all -%}
|
||||
<tr>
|
||||
<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
|
||||
<td>
|
||||
{% set componentLinks = [] %}
|
||||
{% for component in thingComponents %}
|
||||
{%- set link -%}
|
||||
<a href="../{{ component.slug }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endset -%}
|
||||
{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
|
||||
{% set componentLinks = (componentLinks.push(link), componentLinks) %}
|
||||
{%- endfor -%}
|
||||
{% if thingComponents.length > 1 %}
|
||||
<details open>
|
||||
<summary><strong>{{ thingComponents.length }}</strong> components</summary>
|
||||
{{ componentLinks | safe }}
|
||||
</details>
|
||||
{% else %}
|
||||
{{ componentLinks | safe }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
{%- endfor %}
|
||||
@@ -7,11 +7,11 @@ file: styles/utilities/variants.css
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
{% for component in componentsBy.attribute.variant %}
|
||||
{% if component.fileSlug != "icon" or component.fileSlug != "icon-button" -%}
|
||||
- <a href="../{{ component.url }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endif %}
|
||||
{%- endfor %}
|
||||
- [`<wa-badge>`](/docs/components/badge)
|
||||
- [`<wa-button>`](/docs/components/button)
|
||||
- [`<wa-button-group>`](/docs/components/button-group)
|
||||
- [`<wa-callout>`](/docs/components/callout)
|
||||
- [`<wa-tag>`](/docs/components/tag)
|
||||
|
||||
You can create the same effect on any element by using the color variant utility classes:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user