Bring back the docs for components and improve the Icon demo.

main
Zed A. Shaw 2 years ago
parent 17e05130e3
commit 7c6c810efc
  1. 5
      admin/bando/Components.svelte
  2. 126
      admin/bando/demos/Icon.svelte
  3. 5
      admin/bando/demos/Icon.svelte.md

@ -204,11 +204,14 @@
</tabs> </tabs>
<component data-testid="demo-{ selected.title }"> <component data-testid="demo-{ selected.title }">
{#if show == "CODE"} {#if show == "CODE"}
<Code src={ selected.code } /> <Code src={ selected.code } language="javascript" />
{:else if show == "DOCS"} {:else if show == "DOCS"}
{#await load_docs(selected) then docs } {#await load_docs(selected) then docs }
{#if docs} {#if docs}
<Markdown content={ docs } /> <Markdown content={ docs } />
{:else}
<h1>No Docs</h1>
<p>This component is not documented yet.</p>
{/if} {/if}
{/await} {/await}
{:else} {:else}

@ -1,114 +1,46 @@
<script> <script>
import Icon from "$/client/components/Icon.svelte"; import Icon from "$/client/components/Icon.svelte";
import { onMount } from "svelte"; let size = 64;
import api from "$/client/api.js"; let fill = "none";
import { log } from "$/client/logging.js"; let color = "var(--color)";
let width = "2px";
let all_icons = []; let shadow = "";
let inactive = false; let tooltip = "This is a tip!";
let icons = []; let tip_position = "bottom";
export let size=48;
let search = "";
export let labels=true;
export let tight=false;
let message = "";
const search_icons = (pattern) => {
icons = all_icons.filter(i => i.includes(pattern));
}
$: search_icons(search);
const gen_code = (name) => {
let results = `<Icon name="${name}" size="${size}" />`;
navigator.clipboard.writeText(results).then(() => {
message = `${name} copied to clipboard.`;
}, () => {
message = `${name} copy FAILED.`;
});
}
onMount(async () => {
const [status, data] = await api.get("/icons/index.json");
if(status === 200) {
icons = data;
all_icons = icons;
} else {
log.error("Invalid response", status, data);
}
});
</script> </script>
<style> <style>
icons { icons {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 1rem;
}
icons.tight {
grid-template-columns: repeat(10, 1fr);
}
icons icon {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
} }
search-bar { icons div {
display: flex; display: flex;
justify-content: space-evenly; flex-direction: row;
flex-wrap: nowrap; font-size: 2em;
} }
search-bar input#size { icons div input {
width: 6ch; font-size: 1em;
} }
search-bar input#search {
min-width: 30ch;
max-wdith: 30ch;
width: 30ch;
}
search-bar span {
padding-right: 1rem;
}
@media only screen and (max-width: 900px) {
icons {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (max-width: 600px) {
icons {
grid-template-columns: repeat(3, 1fr);
}
}
</style> </style>
<search-bar> <icons>
<span on:click={ () => inactive = !inactive }><Icon name={ inactive ? 'eye' : 'eye-off'} size="24" /></span> <div>size: <input name="size" bind:value={ size } /></div>
<input bind:value={ search } id="search" > <Icon name="x" size="24" /> <input bind:value={ size } id="size" > <div>fill: <input name="fill" bind:value={ fill } /></div>
<span>{ message }</span> <div>width: <input name="width" bind:value={ width } /></div>
</search-bar> <div>color: <input name="color" bind:value={ color } /></div>
<div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
<icons class:tight={ tight }> <div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
{#each icons as name} <div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div>
<icon on:click={ () => gen_code(name) }> <Icon name="keyboard" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name={ name } size={ size } inactive={inactive}/> <Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
{#if labels} <Icon name="activity" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<span>{ name }</span> <Icon name="apple" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
{/if} <Icon name="angry" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
</icon> <Icon name="anchor" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
{:else}
<h1>No Icons</h1>
{/each}
</icons> </icons>
<hr>
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>

@ -0,0 +1,5 @@
# Icons by <a href="https://lucide.dev">lucide</a>
The Bandolier includes the great icon collection from <a href="https://lucide.dev">lucide</a> to get you started. Probably every icon you could possibly need is in this collection, and there's a nice Icon Finder tool to find what you need at <a href="/admin/#/icons/">/admin/#/icons/</a>.
Using `Icon` is very simple. You find the name, and can set a size, whether it's inactive or not, and a few other options to control the appearance. In the Icon Finder you can click on an icon to copy the code for it.
Loading…
Cancel
Save