This commit is contained in:
skidoodle 2024-03-13 00:30:45 +01:00
commit d761a10bf7
102 changed files with 4761 additions and 0 deletions

View file

@ -0,0 +1,15 @@
<script lang="ts">
import HandleDot from './HandleDot.svelte';
export let pad: boolean = false;
</script>
<div class="handle flex gap-1 items-center cursor-grab z-[1]" class:p-6={pad}>
{#each Array(2) as _}
<div class="flex flex-col gap-1">
{#each Array(3) as _}
<HandleDot />
{/each}
</div>
{/each}
</div>

View file

@ -0,0 +1 @@
<div class="bg-text-secondary w-1 h-1 rounded-full" />

View file

@ -0,0 +1,3 @@
<div class="flex flex-col gap-2">
<slot />
</div>

View file

@ -0,0 +1,7 @@
<script lang="ts">
export let id: string | number | undefined = undefined;
</script>
<div class="list-element h-11 rounded-xl bg-field" data-id={id}>
<slot />
</div>

View file

@ -0,0 +1,26 @@
<script lang="ts">
import Toggle from '../elements/Toggle.svelte';
const id = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString();
export let title: string | undefined = undefined;
export let subtitle: string | undefined = undefined;
export let name: string | undefined = undefined;
export let checked: boolean = false;
</script>
<div class="flex justify-between items-center">
<div class="flex flex-col gap-2">
<div class="flex justify-between">
{#if title}
<p class="text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap">
{title}
</p>
{/if}
</div>
{#if subtitle}
<p class="text-text-primary">{subtitle}</p>
{/if}
<slot />
</div>
<Toggle {id} {name} {checked} />
</div>

View file

@ -0,0 +1,32 @@
<script lang="ts">
import { clamp } from '$lib/utils';
import Spinner from '../elements/Spinner.svelte';
export let fetchingPreview: boolean | undefined = undefined;
export let scaleFactor: number = 1.0;
</script>
<div class="relative h-80 overflow-hidden -mt-4 -mx-4 p-4 border-b border-widget-stroke">
<div
class="relative widget-preview-container h-72 select-none flex justify-center items-center transition-opacity opacity-100"
class:opacity-60={fetchingPreview}>
<div
class="relative widget flex justify-center items-center pointer-events-none"
style="--scale: {clamp(scaleFactor, 0, 1) ?? 1.0}">
<slot />
</div>
</div>
<div
class="absolute top-0 left-0 bottom-0 right-0 flex justify-center items-center pointer-events-none transition-opacity opacity-0"
class:opacity-100={fetchingPreview}>
<div class="relative w-12 h-12 flex justify-center items-center bg-black/40 rounded-lg">
<Spinner />
</div>
</div>
</div>
<style lang="postcss">
.widget {
transform: scale(var(--scale, 1));
}
</style>

View file

@ -0,0 +1,8 @@
<script lang="ts">
import Button from '$lib/components/dashboard/elements/Button.svelte';
import { faDiscord } from '@fortawesome/free-brands-svg-icons';
</script>
<Button icon={faDiscord}>Link Discord</Button>
<Button style="red">Remove</Button>

View file

@ -0,0 +1,27 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetExternalSite;
$: widgetData = type[Widget.EXTERNAL_SITE].data as WidgetExternalSite;
</script>
<InputGroup title="Title" style="title">
<TextInput
name="title"
placeholder={widgetData.title}
value={data.title}
minlength={editorConstraints.externalSite.title.min}
maxlength={editorConstraints.externalSite.title.max} />
</InputGroup>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.externalSite.url.min}
maxlength={editorConstraints.externalSite.url.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetInstagramPost;
$: widgetData = type[Widget.INSTAGRAM_POST].data as WidgetInstagramPost;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.instagramPost.url.min}
maxlength={editorConstraints.instagramPost.url.max} />
</InputGroup>

View file

@ -0,0 +1,19 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import MultilineTextInput from '$lib/components/dashboard/elements/MultilineTextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetMarkdown;
$: widgetData = type[Widget.MARKDOWN].data as WidgetMarkdown;
</script>
<InputGroup title="Markdown Text" style="title">
<MultilineTextInput
name="content"
rows={8}
value={data.content}
placeholder={widgetData.content}
minlength={editorConstraints.markdown.content.min}
maxlength={editorConstraints.markdown.content.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetPinterestPin;
$: widgetData = type[Widget.PINTEREST_PIN].data as WidgetPinterestPin;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.pinterestPin.url.min}
maxlength={editorConstraints.pinterestPin.url.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetSoundCloudTrack;
$: widgetData = type[Widget.SOUNDCLOUD_TRACK].data as WidgetSoundCloudTrack;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.soundCloudTrack.url.min}
maxlength={editorConstraints.soundCloudTrack.url.max} />
</InputGroup>

View file

@ -0,0 +1,3 @@
<script lang="ts">
export let data: WidgetSpotifyNowPlaying;
</script>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetTitle;
$: widgetData = type[Widget.TITLE].data as WidgetTitle;
</script>
<InputGroup title="Title" style="title">
<TextInput
name="content"
value={data.content}
placeholder={widgetData.content}
minlength={editorConstraints.markdown.content.min}
maxlength={editorConstraints.markdown.content.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetTwitchLive;
$: widgetData = type[Widget.TWITCH_LIVE].data as WidgetTwitchLive;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.twitchLive.url.min}
maxlength={editorConstraints.twitchLive.url.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetTwitterPost;
$: widgetData = type[Widget.TWITTER_POST].data as WidgetTwitterPost;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.twitterPost.url.min}
maxlength={editorConstraints.twitterPost.url.max} />
</InputGroup>

View file

@ -0,0 +1,18 @@
<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import { editorConstraints } from '$lib/constraints';
import Widget, { type } from '$lib/models/widget';
export let data: WidgetYouTubeVideo;
$: widgetData = type[Widget.YOUTUBE_VIDEO].data as WidgetYouTubeVideo;
</script>
<InputGroup title="URL" style="title">
<TextInput
name="url"
placeholder={widgetData.url}
value={data.url}
minlength={editorConstraints.youTubeVideo.url.min}
maxlength={editorConstraints.youTubeVideo.url.max} />
</InputGroup>