This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/admin/bando/Components.svelte

225 lines
8.6 KiB

<script>
import Accordion from "./demos/Accordion.svelte";
import AspectRatio from "./demos/AspectRatio.svelte";
import Badge from "./demos/Badge.svelte";
import ButtonGroup from "./demos/ButtonGroup.svelte";
import Calendar from "./demos/Calendar.svelte";
import Callout from "./demos/Callout.svelte";
import Cards from "./demos/Cards.svelte";
import Carousel from "./demos/Carousel.svelte";
import Chat from "./demos/Chat.svelte";
import Code from "$/client/components/Code.svelte";
import CodeDemo from "./demos/Code.svelte";
import CodeFormatter from "$/client/components/CodeFormatter.svelte";
import Countdown from "./demos/Countdown.svelte";
import Darkmode from "./demos/Darkmode.svelte";
import DataTable from "./demos/DataTable.svelte";
import FairPay from "./demos/FairPay.svelte";
import Flipper from "./demos/Flipper.svelte";
import Form from "./demos/Form.svelte";
import HLSVideo from "./demos/HLSVideo.svelte";
import Icon from "$client/components/Icon.svelte";
import IconDemo from "./demos/Icon.svelte";
import IconImage from "./demos/IconImage.svelte";
import LiveStream from "./demos/LiveStream.svelte";
import LoggedIn from "./demos/LoggedIn.svelte";
import Login from "./demos/Login.svelte";
import Markdown from "$/client/components/Markdown.svelte";
import MarkdownDemo from "./demos/Markdown.svelte";
import Modal from "./demos/Modal.svelte";
import SEOTricks from "./demos/SEOTricks.svelte";
import Pagination from "./demos/Pagination.svelte";
import PlaceHolder from "./demos/PlaceHolder.svelte";
import Progress from "./demos/Progress.svelte";
import Sidebar from "$/client/components/Sidebar.svelte";
import SidebarCSS from "./demos/SidebarCSS.svelte";
import SidebarDemo from "./demos/Sidebar.svelte";
import SnapImage from "./demos/SnapImage.svelte";
import Spinner from "./demos/Spinner.svelte";
import StackLayer from "./demos/StackLayer.svelte";
import Switch from "./demos/Switch.svelte";
import Tabs from "./demos/Tabs.svelte";
import Tiles from "./demos/Tiles.svelte";
import Toast from "./demos/Toast.svelte";
import Toastier from "./demos/Toastier.svelte";
import Tooltip from "./demos/Tooltip.svelte";
import Video from "./demos/Video.svelte";
import WTVideo from "./demos/WTVideo.svelte";
import Layout from "../Layout.svelte";
import { link, replace } from "svelte-spa-router";
export let params = {};
/* WARNING: If you put any component that uses /api/login into the first slot
* or set active: true on them it will require a login.
*/
let panels = [
{title: "Accordion", active: false, icon: "align-justify", component: Accordion},
{title: "AspectRatio", active: false, icon: "copy", component: AspectRatio},
{title: "Badge", active: false, icon: "award", component: Badge},
{title: "ButtonGroup", active: false, icon: "server", component: ButtonGroup},
{title: "Calendar", active: false, icon: "calendar", component: Calendar},
{title: "Callout", active: false, icon: "file-plus", component: Callout},
{title: "Cards", active: false, icon: "credit-card", component: Cards},
{title: "Carousel", active: false, icon: "repeat", component: Carousel},
{title: "Chat", active: false, icon: "message-circle", component: Chat},
{title: "Code", active: false, icon: "code", component: CodeDemo},
{title: "Countdown", active: false, icon: "clock", component: Countdown},
{title: "Darkmode", active: false, icon: "sunrise", component: Darkmode},
{title: "DataTable", active: false, icon: "grid", component: DataTable},
{title: "FairPay", active: false, icon: "dollar-sign", component: FairPay},
{title: "Flipper", active: false, icon: "layers", component: Flipper},
{title: "Form", active: false, icon: "database", component: Form},
{title: "Icon", active: false, icon: "feather", component: IconDemo},
{title: "IconImage", active: false, icon: "image", component: IconImage},
{title: "LiveStream", active: false, icon: "cast", component: LiveStream},
{title: "LoggedIn", active: false, icon: "log-out", component: LoggedIn},
{title: "Login", active: false, icon: "log-in", component: Login},
{title: "Markdown", active: false, icon: "file", component: MarkdownDemo},
{title: "Modal", active: false, icon: "maximize", component: Modal},
{title: "SEOTricks", active: false, icon: "external-link", component: SEOTricks},
{title: "Pagination", active: false, icon: "skip-forward", component: Pagination},
{title: "PlaceHolder", active: false, icon: "image", component: PlaceHolder},
{title: "Progress", active: false, icon: "thermometer", component: Progress},
{title: "Sidebar", active: false, icon: "sidebar", component: SidebarDemo},
{title: "SidebarCSS", active: false, icon: "sidebar", component: SidebarCSS},
{title: "SnapImage", active: false, icon: "camera", component: SnapImage},
{title: "Spinner", active: false, icon: "rotate-cw", component: Spinner},
{title: "StackLayer", active: false, icon: "layers", component: StackLayer},
{title: "Switch", active: false, icon: "check-square", component: Switch},
{title: "Tabs", active: false, icon: "folder", component: Tabs},
{title: "Tiles", active: false, icon: "camera", component: Tiles},
{title: "Toast", active: false, icon: "message-square", component: Toast},
{title: "Toastier", active: false, icon: "message-square", component: Toastier},
{title: "Tooltip", active: false, icon: "help-circle", component: Tooltip},
{title: "HLSVideo", active: false, icon: "video", component: HLSVideo},
{title: "Video", active: false, icon: "video", component: Video},
{title: "WTVideo", active: false, icon: "video", component: WTVideo},
];
panels.forEach(p => (p.code = p.code || `/bando/demos/${p.title}.svelte`));
const select_named = () => {
if(params.name) {
return panels.find(p => p.title === params.name) || panels[0];
} else {
return panels[0];
}
}
let selected = select_named();
selected.active = true;
let show = "DEMO";
const load_docs = async (from) => {
const res = await fetch(`${from.code}.md`);
return res.status == 200 ? res.text() : undefined;
}
const sidebar_select = (event) => {
const {index, item} = event.detail;
show = "DEMO";
selected = item;
panels = panels.map((x, i) => {
x.active = i == index;
return x;
});
replace(`/bando/components/${selected.title}/`);
}
</script>
<style>
div[slot="top"] span {
display: none;
}
contents {
padding: 0.5rem;
width: 100%;
max-height: 100vh;
overflow-y: auto;
}
tabs {
margin-bottom: 1rem;
}
@media only screen and (max-width: 900px) {
div[slot="top"] h3 {
display: none;
}
div[slot="top"] span {
display: inline-block;
padding-top: 0.3rem;
}
div[slot="bottom"] {
display: none;
}
}
left {
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
max-width: min-content;
width: min-content;
min-width: min-content;
}
</style>
<Layout fullscreen={ true } header={false} footer={ false } testid="page-bando-demos">
<left>
<Sidebar on:select={ sidebar_select } menu={ panels }>
<div slot="top">
<h3><a href="/" use:link><Icon name="arrow-left-circle" /> Components</h3>
<span><Icon name="home" size="36" /></span>
</div>
<div slot="bottom">
<p>Code is in <b>admin/bando/demos</b></p>
</div>
</Sidebar>
</left>
<contents>
<tabs>
<a data-testid="tab-demo" class:active={ show == "DEMO" } on:click={ () => show = "DEMO" }>
<Icon name="eye" size="36px"/> Demo
</a>
<a data-testid="tab-docs" class:active={ show == "DOCS" } on:click={ () => show = "DOCS" }>
<Icon name="book-open" size="36px"/> Docs
</a>
<a data-testid="tab-code" class:active={ show == "CODE" } on:click={ () => show = "CODE" }>
<Icon name="code" size="36px" /> Code
</a>
</tabs>
<component data-testid="demo-{ selected.title }">
{#if show == "CODE"}
<Code src={ selected.code } language="javascript" />
{:else if show == "DOCS"}
{#await load_docs(selected) then docs }
{#if docs}
<Markdown content={ docs } />
{:else}
<h1>No Docs</h1>
<p>This component is not documented yet.</p>
{/if}
{/await}
{:else}
<h1>{selected.title}</h1>
<svelte:component this={selected.component} />
{/if}
</component>
</contents>
</Layout>
<CodeFormatter />