wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

makes byline mdx, deletes old md

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-05 14:05:34 -08:00
parent c545d2bc2f
commit 9b555434b4
Failed to extract signature
30 changed files with 187 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -12,7 +12,7 @@
"editor.wordWrap": "on" "editor.wordWrap": "on"
}, },
"[svelte]": { "[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode" "editor.defaultFormatter": "svelte.svelte-vscode"
}, },
"typescript.tsdk": "node_modules/typescript/lib" "typescript.tsdk": "node_modules/typescript/lib"
} }

20
src/app.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body>
%sveltekit.body% %sveltekit.body%
</body> </body>
</html> </html>

2
src/components/AdSlot/AdSlot.svelte
View file

@ -55,7 +55,7 @@
}); });
</script> </script>
<div data-freestar-ad={dataFreestarAd || null} id={adId}></div> <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
<style> <style>
:global(div.freestar-adslot:has(.unfulfilled-ad)) { :global(div.freestar-adslot:has(.unfulfilled-ad)) {

6
src/components/AdSlot/InlineAd.mdx
View file

@ -46,11 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
```svelte ```svelte
<!-- First inline ad on the page --> <!-- First inline ad on the page -->
<InlineAd n={1} /> <InlineAd n="{1}" />
<!-- ... second ... --> <!-- ... second ... -->
<InlineAd n={2} /> <InlineAd n="{2}" />
<!-- ... third and final. --> <!-- ... third and final. -->
<InlineAd n={3} /> <InlineAd n="{3}" />
``` ```
<Canvas of={InlineAdStories.Demo} /> <Canvas of={InlineAdStories.Demo} />

2
src/components/AdSlot/LeaderboardAd.svelte
View file

@ -46,7 +46,7 @@
}); });
</script> </script>
<svelte:window bind:innerWidth={windowWidth} /> <svelte:window bind:innerWidth="{windowWidth}" />
<div <div
class="freestar-adslot leaderboard__sticky {cls}" class="freestar-adslot leaderboard__sticky {cls}"

2
src/components/AdSlot/ResponsiveAd.svelte
View file

@ -69,7 +69,7 @@
let adType = $derived(getAdType(placementName)); let adType = $derived(getAdType(placementName));
</script> </script>
<svelte:window bind:innerWidth={windowWidth} /> <svelte:window bind:innerWidth="{windowWidth}" />
{#if windowWidth} {#if windowWidth}
{#key placementName} {#key placementName}

4
src/components/Article/Article.mdx
View file

@ -40,13 +40,13 @@ When combined with the `Block` component, you can set custom column widths by pa
```svelte ```svelte
<Article <Article
columnWidths={{ columnWidths="{{
narrower: 310, narrower: 310,
narrow: 450, narrow: 450,
normal: 550, normal: 550,
wide: 675, wide: 675,
wider: 1400, wider: 1400,
}} }}"
> >
<Block width="narrower" /> <Block width="narrower" />
<Block width="narrow" /> <Block width="narrow" />

15
src/components/Byline/stories/docs/component.md → src/components/Byline/Byline.mdx
View file

@ -1,4 +1,12 @@
Byline and dateline. import { Meta } from '@storybook/blocks';
import * as BylineStories from './Byline.stories.svelte';
<Meta of={BylineStories} />
# Byline
Easily add a byline and dateline.
```svelte ```svelte
<script> <script>
@ -6,13 +14,12 @@ Byline and dateline.
</script> </script>
<Byline <Byline
authors="{[ authors={[
'Dea Bankova', 'Dea Bankova',
'Aditi Bhandari',
'Prasanta Kumar Dutta', 'Prasanta Kumar Dutta',
'Anurag Rao', 'Anurag Rao',
'Mariano Zafra', 'Mariano Zafra',
]}" ]}
publishTime="2021-09-12T00:00:00.000Z" publishTime="2021-09-12T00:00:00.000Z"
updateTime="2021-09-12T12:57:00.000Z" updateTime="2021-09-12T12:57:00.000Z"
/> />

10
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -17,18 +17,18 @@
<Story <Story
name="Demo" name="Demo"
args={{ args="{{
src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html', src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
id: 'abortion-rights-map', id: 'abortion-rights-map',
ariaLabel: 'map', ariaLabel: 'map',
frameTitle: 'Global abortion access', frameTitle: 'Global abortion access',
}} }}"
/> />
<Story <Story
name="With chatter" name="With chatter"
tags={['!autodocs']} tags="{['!autodocs']}"
args={{ args="{{
frameTitle: 'Global abortion access', frameTitle: 'Global abortion access',
ariaLabel: 'map', ariaLabel: 'map',
id: 'abortion-rights-map', id: 'abortion-rights-map',
@ -37,5 +37,5 @@
description: 'A map of worldwide access to abortion.', description: 'A map of worldwide access to abortion.',
notes: notes:
'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights', 'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
}} }}"
/> />

1
src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import Fa from 'svelte-fa/src/fa.svelte'; import Fa from 'svelte-fa/src/fa.svelte';
import { faWindowRestore } from '@fortawesome/free-regular-svg-icons'; import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
interface Props { interface Props {

8
src/components/EndNotes/EndNotes.svelte
View file

@ -12,15 +12,13 @@
text: string; text: string;
} }
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
import Markdown from '../Markdown/Markdown.svelte'; import Markdown from '../Markdown/Markdown.svelte';
interface Props { interface Props {
/** /**
* An array of endnote items. * An array of endnote items.
* @required * @required
*/ */
notes?: EndNote[]; notes?: EndNote[];
} }

34
src/components/Framer/Resizer/index.svelte
View file

@ -11,7 +11,11 @@
minFrameWidth?: number; minFrameWidth?: number;
} }
let { breakpoints = [330, 510, 660, 930, 1200], maxFrameWidth = 1200, minFrameWidth = 320 }: Props = $props(); let {
breakpoints = [330, 510, 660, 930, 1200],
maxFrameWidth = 1200,
minFrameWidth = 320,
}: Props = $props();
let container = $state(); let container = $state();
@ -91,9 +95,9 @@
</script> </script>
<svelte:window <svelte:window
onmousemove={move} onmousemove="{move}"
onmouseup={end} onmouseup="{end}"
onkeydown={handleKeyDown} onkeydown="{handleKeyDown}"
bind:innerWidth="{windowInnerWidth}" bind:innerWidth="{windowInnerWidth}"
/> />
@ -105,10 +109,10 @@
<button <button
class="icon left" class="icon left"
disabled="{$width === minWidth}" disabled="{$width === minWidth}"
onclick={decrement} onclick="{decrement}"
onfocus={onFocus} onfocus="{onFocus}"
onmouseover={onFocus} onmouseover="{onFocus}"
onmouseleave={onBlur} onmouseleave="{onBlur}"
> >
<Fa icon="{faMobileAlt}" fw /> <Fa icon="{faMobileAlt}" fw />
</button> </button>
@ -119,18 +123,18 @@
tabindex="0" tabindex="0"
role="button" role="button"
style="left: calc({offset * 100}% - 5px);" style="left: calc({offset * 100}% - 5px);"
onmousedown={start} onmousedown="{start}"
onfocus={onFocus} onfocus="{onFocus}"
onblur={onBlur} onblur="{onBlur}"
></div> ></div>
</div> </div>
<button <button
class="icon right" class="icon right"
disabled="{$width === maxWidth}" disabled="{$width === maxWidth}"
onclick={increment} onclick="{increment}"
onfocus={onFocus} onfocus="{onFocus}"
onmouseover={onFocus} onmouseover="{onFocus}"
onmouseleave={onBlur} onmouseleave="{onBlur}"
> >
<Fa icon="{faDesktop}" fw /> <Fa icon="{faDesktop}" fw />
</button> </button>

1
src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
// For demo purposes only, hard-wiring img paths from Vite // For demo purposes only, hard-wiring img paths from Vite
// @ts-ignore img // @ts-ignore img
import chartXs from '../imgs/ai-chart-xs.png'; import chartXs from '../imgs/ai-chart-xs.png';

7
src/components/Markdown/Markdown.svelte
View file

@ -4,9 +4,6 @@
import { marked } from 'marked'; import { marked } from 'marked';
import { staticMarkdown } from './stores'; import { staticMarkdown } from './stores';
interface Props { interface Props {
/** A Markdown formatted string */ /** A Markdown formatted string */
source?: string; source?: string;
@ -16,7 +13,9 @@
let { source = '', parseInline = false }: Props = $props(); let { source = '', parseInline = false }: Props = $props();
let markdown = $derived(parseInline ? marked.parseInline(source) : marked.parse(source)); let markdown = $derived(
parseInline ? marked.parseInline(source) : marked.parse(source)
);
const setInnerHTML: Action<HTMLElement, string> = (node, html) => { const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
node.innerHTML = html; node.innerHTML = html;

2
src/components/PymChild/PymChild.svelte
View file

@ -1,7 +1,5 @@
<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) --> <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import pym from 'pym.js'; import pym from 'pym.js';
import { pymChildStore } from './stores.js'; import { pymChildStore } from './stores.js';

9
src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
View file

@ -1,8 +1,5 @@
<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) --> <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
/** "Kinesis" colour */ /** "Kinesis" colour */
logoColour?: string; logoColour?: string;
@ -12,7 +9,11 @@
width?: string; width?: string;
} }
let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props(); let {
logoColour = '#D64000',
textColour = '#212223',
width = '100%',
}: Props = $props();
</script> </script>
<svg <svg

9
src/components/ReutersLogo/ReutersLogo.svelte
View file

@ -1,8 +1,5 @@
<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) --> <!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
/** "Kinesis" colour */ /** "Kinesis" colour */
logoColour?: string; logoColour?: string;
@ -12,7 +9,11 @@
width?: string; width?: string;
} }
let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props(); let {
logoColour = '#D64000',
textColour = '#212223',
width = '100%',
}: Props = $props();
</script> </script>
<svg <svg

99
src/components/SEO/SEO.svelte
View file

@ -1,85 +1,72 @@
<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) --> <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
<script lang="ts"> <script lang="ts">
interface GraphicAuthor { interface GraphicAuthor {
name: string; name: string;
url: string; url: string;
} }
interface Props { interface Props {
/** /**
* Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
* is globally available as `import.meta.env.BASE_URL`. * is globally available as `import.meta.env.BASE_URL`.
* @requiredx * @requiredx
* @type {string} * @type {string}
*/ */
baseUrl?: string; baseUrl?: string;
/** /**
* [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page. * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
* @required * @required
* @type {URL} * @type {URL}
*/ */
pageUrl?: URL | null; pageUrl?: URL | null;
/** /**
* SEO title * SEO title
* @required * @required
* @type {string} * @type {string}
*/ */
seoTitle: string; seoTitle: string;
/** /**
* SEO description * SEO description
* @required * @required
* @type {string} * @type {string}
*/ */
seoDescription: string; seoDescription: string;
/** /**
* Share title * Share title
* @required * @required
* @type {string} * @type {string}
*/ */
shareTitle: string; shareTitle: string;
/** /**
* Share description * Share description
* @required * @required
* @type {string} * @type {string}
*/ */
shareDescription: string; shareDescription: string;
/** /**
* Share image path. **Must be an absolute path.** * Share image path. **Must be an absolute path.**
* @required * @required
* @type {string} * @type {string}
*/ */
shareImgPath: string; shareImgPath: string;
/** /**
* Share image alt text, up to 420 characters. * Share image alt text, up to 420 characters.
* @type {string} * @type {string}
*/ */
shareImgAlt?: string; shareImgAlt?: string;
/** /**
* Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string} * @type {string}
*/ */
publishTime?: string; publishTime?: string;
/** /**
* Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string} * @type {string}
*/ */
updateTime?: string; updateTime?: string;
/** /**
* Array of authors for the piece. Each author object must have `name` and `url` attributes. * Array of authors for the piece. Each author object must have `name` and `url` attributes.
*/ */
authors?: GraphicAuthor[]; authors?: GraphicAuthor[];
} }
@ -94,7 +81,7 @@
shareImgAlt = '', shareImgAlt = '',
publishTime = '', publishTime = '',
updateTime = '', updateTime = '',
authors = [] authors = [],
}: Props = $props(); }: Props = $props();
const getOrigin = (baseUrl: string) => { const getOrigin = (baseUrl: string) => {
@ -109,7 +96,9 @@
}; };
let origin = $derived(getOrigin(baseUrl)); let origin = $derived(getOrigin(baseUrl));
let canonicalUrl = $derived((origin + pageUrl?.pathname).replace(/index\.html\/$/, '')); let canonicalUrl = $derived(
(origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
);
const orgLdJson = { const orgLdJson = {
'@context': 'http://schema.org', '@context': 'http://schema.org',

8
src/components/Scroller/Embedded/index.svelte
View file

@ -1,10 +1,8 @@
<script lang="ts"> <script lang="ts">
import type { ContainerWidth, ScrollerStep } from '../../@types/global'; import type { ContainerWidth, ScrollerStep } from '../../@types/global';
type EmbeddedLayout = 'fb' | 'bf'; type EmbeddedLayout = 'fb' | 'bf';
import Background from './Background.svelte'; import Background from './Background.svelte';
import Foreground from './Foreground.svelte'; import Foreground from './Foreground.svelte';
interface Props { interface Props {
@ -13,7 +11,11 @@
backgroundWidth?: ContainerWidth; backgroundWidth?: ContainerWidth;
} }
let { steps = [], embeddedLayout = 'fb', backgroundWidth = 'fluid' }: Props = $props(); let {
steps = [],
embeddedLayout = 'fb',
backgroundWidth = 'fluid',
}: Props = $props();
</script> </script>
{#each steps as step, index} {#each steps as step, index}

4
src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
View file

@ -11,7 +11,7 @@
<p>The count is {count}</p> <p>The count is {count}</p>
<button <button
onclick={() => { onclick="{() => {
count += 1; count += 1;
}}>Click Me</button }}">Click Me</button
> >

13
src/components/SearchInput/SearchInput.svelte
View file

@ -4,12 +4,11 @@
import MagnifyingGlass from './MagnifyingGlass.svelte'; import MagnifyingGlass from './MagnifyingGlass.svelte';
import X from './X.svelte'; import X from './X.svelte';
interface Props { interface Props {
/** /**
* The placeholder text that appears in the search box. * The placeholder text that appears in the search box.
* @type {string} * @type {string}
*/ */
searchPlaceholder?: string; searchPlaceholder?: string;
} }
@ -40,7 +39,7 @@
class="search--input body-caption pl-8" class="search--input body-caption pl-8"
type="text" type="text"
placeholder="{searchPlaceholder}" placeholder="{searchPlaceholder}"
oninput={input} oninput="{input}"
bind:value bind:value
/> />
<div <div
@ -48,8 +47,8 @@
role="button" role="button"
tabindex="0" tabindex="0"
class:invisible="{!active}" class:invisible="{!active}"
onclick={clear} onclick="{clear}"
onkeyup={clear} onkeyup="{clear}"
> >
<X /> <X />
</div> </div>

5
src/components/SiteFooter/SiteFooter.svelte
View file

@ -9,11 +9,10 @@
import starterData from './data.json'; import starterData from './data.json';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
interface Props { interface Props {
/** /**
* Set to `false` to remove graphics referrals * Set to `false` to remove graphics referrals
*/ */
includeReferrals?: boolean; includeReferrals?: boolean;
} }

8
src/components/SiteHeader/MobileMenu/index.svelte
View file

@ -9,7 +9,11 @@
releaseMobileMenu?: any; releaseMobileMenu?: any;
} }
let { data = [], isMobileMenuOpen = false, releaseMobileMenu = () => {} }: Props = $props(); let {
data = [],
isMobileMenuOpen = false,
releaseMobileMenu = () => {},
}: Props = $props();
</script> </script>
{#if isMobileMenuOpen} {#if isMobileMenuOpen}
@ -31,7 +35,7 @@
textColour="var(--nav-primary)" textColour="var(--nav-primary)"
/> />
</div> </div>
<button class="button close-button" onclick={releaseMobileMenu}> <button class="button close-button" onclick="{releaseMobileMenu}">
<div class="button-container"> <div class="button-container">
<CloseIcon /> <CloseIcon />
</div> </div>

7
src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
View file

@ -5,10 +5,11 @@
let { section = {}, headingText } = $props(); let { section = {}, headingText } = $props();
let splitCount = let splitCount = $derived(
$derived(section.children && section.children.length > 7 ? section.children && section.children.length > 7 ?
Math.ceil(section.children.length / 2) Math.ceil(section.children.length / 2)
: 0); : 0
);
</script> </script>
<NavDropdown {headingText}> <NavDropdown {headingText}>

36
src/components/SiteHeader/NavBar/index.svelte
View file

@ -35,27 +35,27 @@
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<li <li
class="nav-item category link" class="nav-item category link"
onmouseenter={() => { onmouseenter="{() => {
navTimeout = setTimeout( navTimeout = setTimeout(
() => activeSection.set(section.id), () => activeSection.set(section.id),
timeout timeout
); );
}} }}"
onfocus={() => activeSection.set(section.id)} onfocus="{() => activeSection.set(section.id)}"
onmouseleave={() => { onmouseleave="{() => {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
}} }}"
onblur={() => { onblur="{() => {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
}} }}"
onclick={() => { onclick="{() => {
if ($activeSection === section.id) { if ($activeSection === section.id) {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
} }
}} }}"
> >
<div <div
class="nav-button link" class="nav-button link"
@ -88,24 +88,24 @@
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<li <li
class="nav-item" class="nav-item"
onmouseenter={() => { onmouseenter="{() => {
navTimeout = setTimeout(() => activeSection.set('more'), timeout); navTimeout = setTimeout(() => activeSection.set('more'), timeout);
}} }}"
onfocus={() => activeSection.set('more')} onfocus="{() => activeSection.set('more')}"
onmouseleave={() => { onmouseleave="{() => {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
}} }}"
onblur={() => { onblur="{() => {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
}} }}"
onclick={() => { onclick="{() => {
if ($activeSection === 'more') { if ($activeSection === 'more') {
clearTimeout(navTimeout); clearTimeout(navTimeout);
activeSection.set(null); activeSection.set(null);
} }
}} }}"
> >
<div <div
class="nav-button more link" class="nav-button more link"

4
src/components/SiteHeader/SiteHeader.svelte
View file

@ -77,9 +77,9 @@
aria-label="Menu" aria-label="Menu"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="{isMobileMenuOpen}" aria-expanded="{isMobileMenuOpen}"
onclick={() => { onclick="{() => {
isMobileMenuOpen = !isMobileMenuOpen; isMobileMenuOpen = !isMobileMenuOpen;
}} }}"
> >
<div class="button-container"> <div class="button-container">
<MenuIcon /> <MenuIcon />

37
src/components/Table/Pagination.svelte
View file

@ -3,33 +3,26 @@
import LeftArrow from './LeftArrow.svelte'; import LeftArrow from './LeftArrow.svelte';
import RightArrow from './RightArrow.svelte'; import RightArrow from './RightArrow.svelte';
interface Props { interface Props {
/** /**
* The current page number. * The current page number.
* @type {number} * @type {number}
*/ */
pageNumber?: number; pageNumber?: number;
/** /**
* The default page size. * The default page size.
* @type {number} * @type {number}
*/ */
pageSize?: number; pageSize?: number;
/** /**
* The number of records in the current page. * The number of records in the current page.
* @type {number} * @type {number}
*/ */
pageLength?: number; pageLength?: number;
/** /**
* The total number of records in the data set. * The total number of records in the data set.
* @type {number} * @type {number}
*/ */
n?: number; n?: number;
} }
@ -37,7 +30,7 @@
pageNumber = $bindable(1), pageNumber = $bindable(1),
pageSize = 25, pageSize = 25,
pageLength = null, pageLength = null,
n = null n = null,
}: Props = $props(); }: Props = $props();
let minRow = $derived(pageNumber * pageSize - pageSize + 1); let minRow = $derived(pageNumber * pageSize - pageSize + 1);
@ -58,7 +51,7 @@
</script> </script>
<nav aria-label="pagination" class="pagination fmt-4"> <nav aria-label="pagination" class="pagination fmt-4">
<button onclick={goToPreviousPage} disabled="{pageNumber === 1}" <button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
><div class="icon-wrapper"> ><div class="icon-wrapper">
<LeftArrow /> <LeftArrow />
<span class="visually-hidden">Previous page</span> <span class="visually-hidden">Previous page</span>
@ -70,7 +63,7 @@
</div> </div>
</div> </div>
<button <button
onclick={goToNextPage} onclick="{goToNextPage}"
disabled="{pageNumber === Math.ceil(n / pageSize)}" disabled="{pageNumber === Math.ceil(n / pageSize)}"
><div class="icon-wrapper"> ><div class="icon-wrapper">
<RightArrow /> <RightArrow />

17
src/components/Table/Select.svelte
View file

@ -2,19 +2,16 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import type { Option } from '../@types/global'; import type { Option } from '../@types/global';
interface Props { interface Props {
/** /**
* The label that appears above the select input. * The label that appears above the select input.
* @type {string} * @type {string}
*/ */
label?: string; label?: string;
/** /**
* The label that appears above the select input. * The label that appears above the select input.
* @type {Array} * @type {Array}
*/ */
options?: Option[]; options?: Option[];
} }
@ -36,7 +33,7 @@
class="select--input body-caption fpx-2" class="select--input body-caption fpx-2"
name="select--input" name="select--input"
id="select--input" id="select--input"
oninput={input} oninput="{input}"
> >
{#each options as obj} {#each options as obj}
<option value="{obj.value}">{obj.text}</option> <option value="{obj.value}">{obj.text}</option>

7
src/components/Table/SortArrow.svelte
View file

@ -5,13 +5,12 @@
*/ */
type SortDirection = 'ascending' | 'descending'; type SortDirection = 'ascending' | 'descending';
interface Props { interface Props {
sortDirection?: SortDirection; sortDirection?: SortDirection;
/** /**
* Whether or not this arrow is currently sorting. It is false by default. * Whether or not this arrow is currently sorting. It is false by default.
* @type {boolean} * @type {boolean}
*/ */
active?: boolean; active?: boolean;
} }

4
src/components/Video/Controls.svelte
View file

@ -15,7 +15,7 @@
controlsBorderOffset, controlsBorderOffset,
resetCondition, resetCondition,
separateReplayIcon, separateReplayIcon,
controlsColour controlsColour,
} = $props(); } = $props();
function forwardBtnClick() { function forwardBtnClick() {
@ -29,7 +29,7 @@
</script> </script>
<button <button
onclick={forwardBtnClick} onclick="{forwardBtnClick}"
style=" style="
opacity: {controlsOpacity}; opacity: {controlsOpacity};
top: {controlsPosition === 'top left' || controlsPosition === 'top right' ? top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?