swaf/test/assets/views/design.svelte

130 lines
4.7 KiB
Svelte
Raw Normal View History

<script>
import {route} from "../../common/Routing";
2021-11-21 13:08:57 +01:00
import BaseTemplate from "./templates/BaseTemplate.svelte";
import Message from "./components/Message.svelte";
import Form from "./utils/Form.svelte";
import Field from "./utils/Field.svelte";
import Pagination from "./components/Pagination.svelte";
import {Pagination as PaginationData} from "../../common/Pagination.js";
import Breadcrumb from "./components/Breadcrumb.svelte";
import Icon from "./utils/Icon.svelte";
import DesignButtons from "./DesignButtons.svelte";
2021-11-21 16:10:38 +01:00
import CopyableText from "./components/CopyableText.svelte";
const paginationData = new PaginationData(20, 20, 1000).serialize();
</script>
2021-11-21 13:08:57 +01:00
<BaseTemplate title="Design test">
<DesignButtons/>
<div class="panel">
<h2>
<Icon name="git-commit"/>
Common elements
</h2>
<p>Paragraph</p>
<p>Paragraph, <a href={route('home')}>Link</a>, <a href={route('home')} target="_blank">External link</a></p>
<ul>
<li>Unordered</li>
<li>List</li>
</ul>
<ol>
<li>Ordered</li>
<li>List</li>
</ol>
<DesignButtons/>
</div>
<div class="panel">
<h2>
<Icon name="eye-off"/>
Discreet messages
</h2>
<Message type="success" content="Discreet success." discreet/>
<Message type="info" content="Discreet info." discreet/>
<Message type="warning" content="Discreet warning." discreet/>
<Message type="error" content="Discreet sticky error." discreet sticky/>
<Message type="error-alert" content="Discreet error-alert." discreet/>
</div>
<div class="panel">
<h2>
<Icon name="file-text"/>
Forms
</h2>
<Form action="javascript: void(0)"
submitText="Submit" submitIcon="check"
confirm="Are you sure?">
<Field type="text" name="text" placeholder="Text field" icon="type"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="password" name="password" placeholder="Password field" icon="key"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={{
h: 'Hours',
m: 'Minutes',
s: 'Seconds',
}} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="select" name="select" placeholder="Select field" icon="list" extraData={[
'Option 1',
'Option 2',
'Option 3',
]} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="textarea" name="textarea" placeholder="Textarea field" icon="file-text"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="checkbox" name="checkbox" placeholder="Checkbox field" icon="check-square"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="color" name="color" placeholder="Color field" icon="aperture"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="file" name="file" placeholder="Choose a file" icon="upload"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="file" name="files" placeholder="Choose files" icon="upload" multiple
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="text" name="disabled_text" placeholder="Disabled text field" icon="type" disabled
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
</Form>
</div>
<div class="panel">
<h2>
<Icon name="file"/>
Pagination
</h2>
<Pagination routeName="home" contextSize="3" pagination={paginationData}/>
</div>
<div class="panel">
<h2>
<Icon name="map-pin"/>
Breadcrumb
</h2>
<Breadcrumb currentPageTitle="Design test" pages={[
{link: route('home'), title: 'Home'},
{link: route('home'), title: 'Home again'},
{link: route('design'), title: 'self'},
]}/>
</div>
2021-11-21 16:10:38 +01:00
<div class="panel">
<h2>
<Icon name="copy"/>
Copyable text
</h2>
<CopyableText title="URL" content="https://swaf.dev"/>
</div>
2021-11-21 13:08:57 +01:00
</BaseTemplate>