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.
224 lines
8.6 KiB
224 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 OGPreview from "./demos/OGPreview.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: "OGPreview", active: false, icon: "external-link", component: OGPreview},
|
|
{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 />
|
|
|