swaf/src/assets/views/design.svelte

<script>
    import {route} from "../../common/Routing";
    import BaseLayout from "./layouts/BaseLayout.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";

    const paginationData = new PaginationData(20, 20, 1000).serialize();
</script>

<BaseLayout 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></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',
                'm',
                's',
            ]} 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>
</BaseLayout>