@onsvisual/svelte-components 1.0.63 → 1.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/layout/Header/Header.svelte +35 -643
- package/dist/layout/Header/Header.svelte.d.ts +4 -2
- package/dist/layout/Header/HeaderNav.svelte +173 -0
- package/dist/layout/Header/HeaderNav.svelte.d.ts +29 -0
- package/dist/layout/Header/HeaderNavLegacy.svelte +442 -0
- package/dist/layout/Header/HeaderNavLegacy.svelte.d.ts +33 -0
- package/dist/layout/Paginator/Paginator.stories.svelte +36 -0
- package/dist/layout/Paginator/Paginator.stories.svelte.d.ts +23 -0
- package/dist/layout/Paginator/Paginator.svelte +85 -0
- package/dist/layout/Paginator/Paginator.svelte.d.ts +33 -0
- package/dist/layout/Paginator/docs/component.md +16 -0
- package/dist/layout/PhaseBanner/docs/component.md +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} HeaderNavLegacyProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} HeaderNavLegacyEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} HeaderNavLegacySlots */
|
|
4
|
+
export default class HeaderNavLegacy extends SvelteComponentTyped<{
|
|
5
|
+
path?: string | undefined;
|
|
6
|
+
baseurl?: string | undefined;
|
|
7
|
+
i18n?: ((text: any) => any) | undefined;
|
|
8
|
+
bilingual?: boolean | undefined;
|
|
9
|
+
lang?: string | undefined;
|
|
10
|
+
baseother?: string | undefined;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}> {
|
|
14
|
+
}
|
|
15
|
+
export type HeaderNavLegacyProps = typeof __propDef.props;
|
|
16
|
+
export type HeaderNavLegacyEvents = typeof __propDef.events;
|
|
17
|
+
export type HeaderNavLegacySlots = typeof __propDef.slots;
|
|
18
|
+
import { SvelteComponentTyped } from "svelte";
|
|
19
|
+
declare const __propDef: {
|
|
20
|
+
props: {
|
|
21
|
+
path?: string | undefined;
|
|
22
|
+
baseurl?: string | undefined;
|
|
23
|
+
i18n?: ((text: any) => any) | undefined;
|
|
24
|
+
bilingual?: boolean | undefined;
|
|
25
|
+
lang?: string | undefined;
|
|
26
|
+
baseother?: string | undefined;
|
|
27
|
+
};
|
|
28
|
+
events: {
|
|
29
|
+
[evt: string]: CustomEvent<any>;
|
|
30
|
+
};
|
|
31
|
+
slots: {};
|
|
32
|
+
};
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import { withComponentDocs } from "../../js/withParams.js";
|
|
4
|
+
import Paginator from "./Paginator.svelte";
|
|
5
|
+
import componentDocs from "./docs/component.md?raw";
|
|
6
|
+
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: "Layout/Paginator",
|
|
9
|
+
component: Paginator,
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
argTypes: {},
|
|
12
|
+
parameters: withComponentDocs(componentDocs)
|
|
13
|
+
});
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Story
|
|
17
|
+
name="Default"
|
|
18
|
+
args={{
|
|
19
|
+
pageCount: 10,
|
|
20
|
+
pageCurrent: 2,
|
|
21
|
+
nextHref: "#3",
|
|
22
|
+
prevHref: "#1"
|
|
23
|
+
}}
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<Story
|
|
27
|
+
name="Custom page titles"
|
|
28
|
+
args={{
|
|
29
|
+
pageCount: 10,
|
|
30
|
+
pageCurrent: 2,
|
|
31
|
+
nextHref: "#3",
|
|
32
|
+
prevHref: "#1",
|
|
33
|
+
prevTitle: "Introduction",
|
|
34
|
+
nextTitle: "Another page"
|
|
35
|
+
}}
|
|
36
|
+
/>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} PaginatorProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} PaginatorEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} PaginatorSlots */
|
|
4
|
+
export default class Paginator extends SvelteComponentTyped<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type PaginatorProps = typeof __propDef.props;
|
|
11
|
+
export type PaginatorEvents = typeof __propDef.events;
|
|
12
|
+
export type PaginatorSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponentTyped } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* Total number of pages
|
|
4
|
+
* @type {number}
|
|
5
|
+
*/
|
|
6
|
+
export let pageCount = 1;
|
|
7
|
+
/**
|
|
8
|
+
* Number of the current page
|
|
9
|
+
* @type {number}
|
|
10
|
+
*/
|
|
11
|
+
export let pageCurrent = 1;
|
|
12
|
+
/**
|
|
13
|
+
* URL of next page (use null if on last page)
|
|
14
|
+
* @type {string|null}
|
|
15
|
+
*/
|
|
16
|
+
export let nextHref = null;
|
|
17
|
+
/**
|
|
18
|
+
* URL of previous page (use null if on first page)
|
|
19
|
+
* @type {string|null}
|
|
20
|
+
*/
|
|
21
|
+
export let prevHref = null;
|
|
22
|
+
/**
|
|
23
|
+
* (Optional) title of next page (with no label, will default to 'page {x-1} of {n}')
|
|
24
|
+
* @type {string|null}
|
|
25
|
+
*/
|
|
26
|
+
export let nextTitle = null;
|
|
27
|
+
/**
|
|
28
|
+
* (Optional) title of previous page (with no label, will default to 'page {x+1} of {n}')
|
|
29
|
+
* @type {string|null}
|
|
30
|
+
*/
|
|
31
|
+
export let prevTitle = null;
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<nav class="ons-content-pagination" aria-label="Guide pagination">
|
|
35
|
+
<ul class="ons-content-pagination__list">
|
|
36
|
+
{#if prevHref}
|
|
37
|
+
<li class="ons-content-pagination__item">
|
|
38
|
+
<a href={prevHref} class="ons-content-pagination__link" rel="prev">
|
|
39
|
+
<span class="ons-content-pagination__link-title"
|
|
40
|
+
><svg
|
|
41
|
+
class="ons-icon ons-icon--m"
|
|
42
|
+
viewBox="0 0 17 13"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
focusable="false"
|
|
45
|
+
fill="currentColor"
|
|
46
|
+
role="img"
|
|
47
|
+
title="ons-icon-arrow-previous"
|
|
48
|
+
>
|
|
49
|
+
<path
|
|
50
|
+
d="M6.4.2.3 6.4c-.2.2-.2.4 0 .6l6.2 5.8c.2.2.4.1.6 0l.8-.9c.2-.2.1-.4 0-.6l-4-3.7h12.5c.2 0 .4-.2.4-.4V6c0-.2-.2-.4-.4-.4H3.8l4-4c.2-.1.2-.4.1-.5L7 .2c-.1-.1-.4-.1-.6 0z"
|
|
51
|
+
/>
|
|
52
|
+
</svg><span class="ons-content-pagination__link-text">Previous page</span>
|
|
53
|
+
</span>
|
|
54
|
+
<span class="ons-content-pagination__link-label"
|
|
55
|
+
>{prevTitle || `${pageCurrent - 1} of ${pageCount}`}</span
|
|
56
|
+
>
|
|
57
|
+
</a>
|
|
58
|
+
</li>
|
|
59
|
+
{/if}
|
|
60
|
+
{#if nextHref}
|
|
61
|
+
<li class="ons-content-pagination__item">
|
|
62
|
+
<a href={nextHref} class="ons-content-pagination__link" rel="next">
|
|
63
|
+
<span class="ons-content-pagination__link-title">
|
|
64
|
+
<svg
|
|
65
|
+
class="ons-icon ons-icon--m"
|
|
66
|
+
viewBox="0 0 17 13"
|
|
67
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
68
|
+
focusable="false"
|
|
69
|
+
fill="currentColor"
|
|
70
|
+
role="img"
|
|
71
|
+
title="ons-icon-arrow-next"
|
|
72
|
+
>
|
|
73
|
+
<path
|
|
74
|
+
d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z"
|
|
75
|
+
/>
|
|
76
|
+
</svg><span class="ons-content-pagination__link-text">Next page</span>
|
|
77
|
+
</span>
|
|
78
|
+
<span class="ons-content-pagination__link-label"
|
|
79
|
+
>{nextTitle || `${pageCurrent + 1} of ${pageCount}`}</span
|
|
80
|
+
>
|
|
81
|
+
</a>
|
|
82
|
+
</li>
|
|
83
|
+
{/if}
|
|
84
|
+
</ul>
|
|
85
|
+
</nav>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} PaginatorProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} PaginatorEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} PaginatorSlots */
|
|
4
|
+
export default class Paginator extends SvelteComponentTyped<{
|
|
5
|
+
pageCount?: number | undefined;
|
|
6
|
+
pageCurrent?: number | undefined;
|
|
7
|
+
nextHref?: string | null | undefined;
|
|
8
|
+
prevHref?: string | null | undefined;
|
|
9
|
+
nextTitle?: string | null | undefined;
|
|
10
|
+
prevTitle?: string | null | undefined;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}> {
|
|
14
|
+
}
|
|
15
|
+
export type PaginatorProps = typeof __propDef.props;
|
|
16
|
+
export type PaginatorEvents = typeof __propDef.events;
|
|
17
|
+
export type PaginatorSlots = typeof __propDef.slots;
|
|
18
|
+
import { SvelteComponentTyped } from "svelte";
|
|
19
|
+
declare const __propDef: {
|
|
20
|
+
props: {
|
|
21
|
+
pageCount?: number | undefined;
|
|
22
|
+
pageCurrent?: number | undefined;
|
|
23
|
+
nextHref?: string | null | undefined;
|
|
24
|
+
prevHref?: string | null | undefined;
|
|
25
|
+
nextTitle?: string | null | undefined;
|
|
26
|
+
prevTitle?: string | null | undefined;
|
|
27
|
+
};
|
|
28
|
+
events: {
|
|
29
|
+
[evt: string]: CustomEvent<any>;
|
|
30
|
+
};
|
|
31
|
+
slots: {};
|
|
32
|
+
};
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
A very simple next/previous page paginator.
|
|
2
|
+
|
|
3
|
+
Based on the simpler version of this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/pagination).
|
|
4
|
+
|
|
5
|
+
<!-- prettier-ignore -->
|
|
6
|
+
```html
|
|
7
|
+
<script>
|
|
8
|
+
import { Paginator } from "@onsvisual/svelte-components";
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<Paginator
|
|
12
|
+
pageCount={10},
|
|
13
|
+
pageCurrent={2},
|
|
14
|
+
nextHref="#3",
|
|
15
|
+
prevHref="#1"/>
|
|
16
|
+
```
|