You've already forked AstralRinth
forked from didirus/AstralRinth
Refactor folder structure
This commit is contained in:
venashial
101
src/components/Avatar.svelte
Normal file
101
src/components/Avatar.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
// TODO: Make square icon `md` more rounded
|
||||
|
||||
import { onMount } from 'svelte'
|
||||
import { classCombine } from '../utils/classCombine'
|
||||
|
||||
/** Optional, as a default icon will be substituted if no image was specified */
|
||||
export let src: string | undefined
|
||||
export let size: 'xs' | 'sm' | 'md' | 'lg'
|
||||
export let circle = false
|
||||
export let floatUp = false
|
||||
|
||||
let className: string
|
||||
$: className = classCombine([
|
||||
'avatar',
|
||||
circle && 'avatar--circle',
|
||||
`avatar--size-${size}`,
|
||||
floatUp && 'avatar--float-up',
|
||||
])
|
||||
|
||||
let img
|
||||
|
||||
onMount(() => {
|
||||
if (img && img.naturalWidth) {
|
||||
const isPixelated = () => {
|
||||
if (img.naturalWidth < 96 && img.naturalWidth > 0) {
|
||||
img.style = 'image-rendering: pixelated;'
|
||||
}
|
||||
}
|
||||
|
||||
if (img.naturalWidth) {
|
||||
isPixelated()
|
||||
} else {
|
||||
img.onload = isPixelated
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if src}
|
||||
<img {src} bind:this={img} class={className} alt="" />
|
||||
{:else}
|
||||
<svg
|
||||
class={className}
|
||||
xml:space="preserve"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-miterlimit="1.5"
|
||||
clip-rule="evenodd"
|
||||
viewBox="0 0 104 104"
|
||||
aria-hidden="true">
|
||||
<path fill="none" d="M0 0h103.4v103.4H0z" />
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#9a9a9a"
|
||||
stroke-width="5"
|
||||
d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11" />
|
||||
</svg>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.avatar {
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: var(--shadow-inset-lg), var(--shadow-raised-lg);
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
background-color: var(--color-button-bg);
|
||||
|
||||
&--size {
|
||||
&-xs {
|
||||
--size: 2.5rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-raised);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
--size: 3rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-raised);
|
||||
}
|
||||
|
||||
&-md {
|
||||
--size: 6rem;
|
||||
border-radius: var(--rounded-lg);
|
||||
}
|
||||
|
||||
&-lg {
|
||||
--size: 9rem;
|
||||
border-radius: var(--rounded-lg);
|
||||
}
|
||||
}
|
||||
|
||||
&--float-up {
|
||||
margin-top: calc(var(--size) * (-2 / 3));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/components/Badge.svelte
Normal file
51
src/components/Badge.svelte
Normal file
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
export let label = ''
|
||||
/** Supports `green`, `yellow`, `red`, & `gray` */
|
||||
export let color = 'gray'
|
||||
</script>
|
||||
|
||||
<div class="badge badge--color-{color}">
|
||||
{label}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.badge {
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
line-height: 1em;
|
||||
|
||||
&--color-green {
|
||||
color: var(--color-badge-green-text);
|
||||
--color-dot: var(--color-badge-green-dot);
|
||||
}
|
||||
|
||||
&--color-yellow {
|
||||
color: var(--color-badge-yellow-text);
|
||||
--color-dot: var(--color-badge-yellow-dot);
|
||||
}
|
||||
|
||||
&--color-red {
|
||||
color: var(--color-badge-red-text);
|
||||
--color-dot: var(--color-badge-red-dot);
|
||||
}
|
||||
|
||||
&--color-gray {
|
||||
color: var(--color-badge-gray-text);
|
||||
--color-dot: var(--color-badge-gray-dot);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-dot);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
170
src/components/Button.svelte
Normal file
170
src/components/Button.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script lang="ts">
|
||||
// TODO: sizes
|
||||
// TODO: icon only buttons should have uniform padding
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { classCombine } from '../utils/classCombine'
|
||||
|
||||
/** The element to be styled as a button */
|
||||
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
|
||||
export let href = ''
|
||||
if (href) as = 'a'
|
||||
|
||||
/** Use `value` if the button is an `<input`> */
|
||||
export let value = ''
|
||||
|
||||
export let size: 'sm' | 'md' | 'lg' = 'md'
|
||||
export let color:
|
||||
| ''
|
||||
| 'raised'
|
||||
| 'primary'
|
||||
| 'primary-light'
|
||||
| 'secondary'
|
||||
| 'tertiary'
|
||||
| 'danger'
|
||||
| 'danger-light'
|
||||
| 'transparent' = ''
|
||||
|
||||
/** Show notification badge in the upper right of button */
|
||||
export let badge = false
|
||||
|
||||
export let disabled = false
|
||||
|
||||
/** Hover title for accessibility */
|
||||
export let title = ''
|
||||
|
||||
/** Link target */
|
||||
export let target = ''
|
||||
|
||||
let className: string
|
||||
$: className = classCombine([
|
||||
'button',
|
||||
`button--size-${size}`,
|
||||
`button--color-${color}`,
|
||||
badge && 'has-badge',
|
||||
])
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function dispatchClick() {
|
||||
if (!disabled) dispatch('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if as === 'a'}
|
||||
<a class={className} {href} {disabled} {title} {target} on:click={dispatchClick}>
|
||||
<slot />
|
||||
</a>
|
||||
{:else if as === 'input'}
|
||||
<input class={className} {value} {disabled} {title} on:click={dispatchClick} />
|
||||
{:else}
|
||||
<svelte:element this={as} class={className} {disabled} {title} on:click={dispatchClick}>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 2rem;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 100%;
|
||||
|
||||
color: var(--color-bg-contrast);
|
||||
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
background-color: var(--color-button-bg);
|
||||
|
||||
border-radius: var(--rounded);
|
||||
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
|
||||
outline 0.2s ease-in-out;
|
||||
|
||||
&:hover:not(&--color-transparent, &:disabled) {
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
&:active:not(&--color-transparent, &:disabled) {
|
||||
transform: scale(0.95);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
&--color {
|
||||
&-raised {
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
|
||||
}
|
||||
|
||||
&-primary {
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-brand-contrast);
|
||||
}
|
||||
|
||||
&-primary-light {
|
||||
background-color: var(--color-brand-light);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-brand-contrast);
|
||||
}
|
||||
|
||||
&-tertiary {
|
||||
background-color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
filter: brightness(1) !important;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: var(--color-badge-red-dot);
|
||||
color: var(--color-brand-contrast);
|
||||
}
|
||||
|
||||
&-danger-light {
|
||||
background-color: var(--color-danger-bg);
|
||||
color: var(--color-danger-text);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 50%;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
&--pad-even {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 0;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.has-badge::after {
|
||||
content: '';
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--rounded-max);
|
||||
background-color: var(--color-brand);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/components/Checkbox.svelte
Normal file
66
src/components/Checkbox.svelte
Normal file
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import { uniqueId } from '../utils/uniqueId'
|
||||
import IconCheck from 'virtual:icons/heroicons-outline/check'
|
||||
|
||||
export let checked = false
|
||||
|
||||
const id = `checkbox-${uniqueId()}`
|
||||
</script>
|
||||
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" bind:checked on:change {id} name={id} />
|
||||
<label for={id} class="checkbox__label">
|
||||
<span class="checkbox__label__box">
|
||||
<IconCheck />
|
||||
</span>
|
||||
<slot />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.checkbox {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
> :global(.icon) {
|
||||
width: 1var (--unit-3);
|
||||
margin-right: -0var (--unit-3);
|
||||
}
|
||||
|
||||
&__box {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
display: flex;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--color-button-bg);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> :global(.icon) {
|
||||
display: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--color-raised-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[type='checkbox']:checked + label span {
|
||||
background-color: var(--color-brand);
|
||||
|
||||
:global(.icon) {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/CheckboxList.svelte
Normal file
46
src/components/CheckboxList.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import Checkbox from './Checkbox.svelte'
|
||||
import type { Option } from './types'
|
||||
|
||||
export let value = []
|
||||
export let options: Option[] = []
|
||||
|
||||
/** Wrap the options horizontally */
|
||||
export let wrap = false
|
||||
|
||||
const handleChange = (e, key) => {
|
||||
if (e.target.checked) {
|
||||
if (!value) value = []
|
||||
value = [key, ...value]
|
||||
} else {
|
||||
value = value.filter((it) => key !== it)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="checkbox-list" class:wrap>
|
||||
{#each options as option}
|
||||
<Checkbox on:change={(e) => handleChange(e, option.value)}>
|
||||
{#if option.icon && typeof option.icon === 'string'}
|
||||
{@html option.icon}
|
||||
{:else if option.icon}
|
||||
<svelte:component this={option.icon} />
|
||||
{/if}
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.checkbox-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
&.wrap {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src/components/CheckboxVirtualList.svelte
Normal file
43
src/components/CheckboxVirtualList.svelte
Normal file
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
// TODO: Add fade out styling on top and bottom
|
||||
|
||||
import Checkbox from './Checkbox.svelte'
|
||||
import VirtualList from 'svelte-tiny-virtual-list'
|
||||
import type { Option } from './types'
|
||||
|
||||
/** Height in pixels of list */
|
||||
export let height = 200
|
||||
|
||||
export let value = []
|
||||
export let options: Option[] = []
|
||||
|
||||
const handleChange = (e, key) => {
|
||||
if (e.target.checked) {
|
||||
if (!value) value = []
|
||||
value = [key, ...value]
|
||||
} else {
|
||||
value = value.filter((it) => key !== it)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<VirtualList width="100%" {height} itemCount={options.length} itemSize={26}>
|
||||
<div
|
||||
slot="item"
|
||||
let:index
|
||||
let:style
|
||||
{style}
|
||||
style:padding-bottom={options.length - 1 === index ? '2.5rem' : ''}>
|
||||
{@const option = options[index]}
|
||||
<Checkbox
|
||||
checked={value && value.includes(option.value)}
|
||||
on:change={(e) => handleChange(e, option.value)}>
|
||||
{#if option.icon && typeof option.icon === 'string'}
|
||||
{@html option.icon}
|
||||
{:else if option.icon}
|
||||
<svelte:component this={option.icon} />
|
||||
{/if}
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
</div>
|
||||
</VirtualList>
|
||||
45
src/components/Chips.svelte
Normal file
45
src/components/Chips.svelte
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
import Button from './Button.svelte'
|
||||
import IconCheck from 'virtual:icons/heroicons-outline/check'
|
||||
|
||||
interface Option {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
export let options: Option[] = []
|
||||
export let value: string | number
|
||||
// If set to true, one chip is always selected
|
||||
export let neverEmpty = false
|
||||
|
||||
let selected: Option | null = options.find((option) => option.value === (value || ''))
|
||||
|
||||
$: if (selected) {
|
||||
value = selected.value
|
||||
} else {
|
||||
value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="chips">
|
||||
{#each options as option}
|
||||
{@const isSelected = selected?.value === option.value}
|
||||
<Button
|
||||
color={isSelected ? 'primary-light' : undefined}
|
||||
on:click={() => {
|
||||
isSelected && !neverEmpty ? (selected = null) : (selected = option)
|
||||
}}>
|
||||
{#if isSelected}
|
||||
<IconCheck />
|
||||
{/if}
|
||||
{option.label}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
46
src/components/Field.svelte
Normal file
46
src/components/Field.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { uniqueId } from '../utils/uniqueId'
|
||||
|
||||
export let required = false
|
||||
export let label: string
|
||||
export let helper = ''
|
||||
|
||||
const id = `field-${uniqueId()}`
|
||||
</script>
|
||||
|
||||
<div class="field">
|
||||
<label for={id} class="field__label" class:required>
|
||||
<span class="field__label__title">{@html label}</span>
|
||||
{#if helper}
|
||||
<span class="field__label__helper">{helper}</span>
|
||||
{/if}
|
||||
</label>
|
||||
<slot {id} />
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
|
||||
&__title {
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
:global(i) {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
&__helper {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/components/Modal.svelte
Normal file
142
src/components/Modal.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { fade, fly } from 'svelte/transition'
|
||||
import Button from './Button.svelte'
|
||||
import { classCombine } from '../utils/classCombine'
|
||||
import IconX from 'virtual:icons/heroicons-outline/x'
|
||||
import { t } from 'svelte-intl-precompile'
|
||||
|
||||
export let open = false
|
||||
|
||||
/** Set the width of the modal */
|
||||
export let size: 'md' | 'lg' = 'md'
|
||||
|
||||
export let title = ''
|
||||
|
||||
/** If enabled, clicking outside the modal with close it */
|
||||
export let dismissable = true
|
||||
|
||||
function close() {
|
||||
open = false
|
||||
}
|
||||
|
||||
function trigger() {
|
||||
open = !open
|
||||
}
|
||||
</script>
|
||||
|
||||
<slot name="trigger" {trigger} />
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="modal-background"
|
||||
transition:fade={{ duration: 300 }}
|
||||
on:click={() => {
|
||||
if (dismissable) close()
|
||||
}} />
|
||||
|
||||
<div
|
||||
class={classCombine(['modal', `modal--size-${size}`, 'card'])}
|
||||
transition:fly={{ y: 400, duration: 250 }}>
|
||||
<div class="modal__top">
|
||||
<h2 class="title-secondary">{title}</h2>
|
||||
<Button title="Close" color="transparent" on:click={close}>
|
||||
<IconX width={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<div class="modal__buttons">
|
||||
<Button on:click={close}><IconX /> Cancel</Button>
|
||||
<slot name="button" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
:global(.base.theme-dark > .modal, .base.theme-oled > .modal) {
|
||||
border: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: hsla(0, 0%, 0%, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 80%;
|
||||
z-index: 21;
|
||||
max-height: calc(100% - 2rem);
|
||||
overflow-y: auto;
|
||||
|
||||
&--size {
|
||||
&-md {
|
||||
max-width: 600px;
|
||||
}
|
||||
&-lg {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
&__top {
|
||||
background-color: var(--color-bg);
|
||||
margin: -1rem -1rem 0.5rem -1rem;
|
||||
padding: 1rem 1rem 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__danger {
|
||||
margin: -1.5rem -1rem 0.5rem;
|
||||
background-color: var(--color-danger-bg);
|
||||
padding: 1rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--color-danger-text);
|
||||
border-color: var(--color-danger-text);
|
||||
border-width: 0.15rem 0;
|
||||
border-style: solid;
|
||||
|
||||
:global(.icon) {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(p),
|
||||
:global(ul),
|
||||
:global(ol) {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
||||
:global(a) {
|
||||
color: var(--color-link);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/components/ModalDeletion.svelte
Normal file
59
src/components/ModalDeletion.svelte
Normal file
@@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import Modal from './Modal.svelte'
|
||||
import Button from './Button.svelte'
|
||||
import TextInput from './TextInput.svelte'
|
||||
import { t } from 'svelte-intl-precompile'
|
||||
import IconExclamation from 'virtual:icons/heroicons-outline/exclamation'
|
||||
import IconTrash from 'virtual:icons/heroicons-outline/trash'
|
||||
import { markdown } from '../utils'
|
||||
import Field from './Field.svelte'
|
||||
|
||||
export let key: string
|
||||
export let type: 'project' | 'version' | 'account' | 'image'
|
||||
|
||||
export let open = false
|
||||
|
||||
let keyInput = ''
|
||||
</script>
|
||||
|
||||
<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger>
|
||||
<slot slot="trigger" name="trigger" {trigger} />
|
||||
|
||||
{#if type === 'account' || 'project'}
|
||||
<div class="important-banner">
|
||||
<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{@html markdown($t(`modal.deletion.${type}.description`))}
|
||||
<Field label={$t('modal.deletion.generic.verify', { values: { key } })} let:id>
|
||||
<TextInput
|
||||
placeholder={$t('modal.deletion.generic.placeholder', { values: { key } })}
|
||||
bind:value={keyInput}
|
||||
{id} />
|
||||
</Field>
|
||||
|
||||
<Button color="danger" slot="button" disabled={key !== keyInput}>
|
||||
<IconTrash />
|
||||
{$t(`modal.deletion.${type}.action`)}
|
||||
</Button>
|
||||
</Modal>
|
||||
|
||||
<style lang="postcss">
|
||||
.important-banner {
|
||||
margin: -1.5rem -1rem 0.5rem;
|
||||
background-color: var(--color-danger-bg);
|
||||
padding: 1rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--color-danger-text);
|
||||
border-color: var(--color-danger-text);
|
||||
border-width: 0.15rem 0;
|
||||
border-style: solid;
|
||||
|
||||
:global(.icon) {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
src/components/NavRow.svelte
Normal file
80
src/components/NavRow.svelte
Normal file
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
|
||||
interface Link {
|
||||
href: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export let links: Link[]
|
||||
/** Query param name to use (to not use queries, leave this prop blank) */
|
||||
export let query = ''
|
||||
|
||||
export let resetScroll = false
|
||||
|
||||
/** Path level in URL, zero-indexed */
|
||||
export let level = 0
|
||||
|
||||
let path: string[]
|
||||
$: path = [
|
||||
...$page.url.pathname
|
||||
.substring(1)
|
||||
.split('/')
|
||||
.map((route) => '/' + route),
|
||||
'/',
|
||||
]
|
||||
|
||||
$: basePath = path.slice(0, level).join('')
|
||||
</script>
|
||||
|
||||
<nav class="navigation">
|
||||
{#each links as link}
|
||||
<a
|
||||
href={query
|
||||
? link.href
|
||||
? `?${query}=${link.href}`
|
||||
: '?'
|
||||
: level === 0
|
||||
? link.href
|
||||
: basePath + link.href}
|
||||
on:click={() => {
|
||||
if (resetScroll) document.body.scrollTo(0, 0)
|
||||
}}
|
||||
class="navigation__link"
|
||||
class:is-active={query
|
||||
? ($page.url.searchParams.get(query) || '') === link.href
|
||||
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
|
||||
sveltekit:noscroll={!resetScroll || null}>{link.label}</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__link {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-light);
|
||||
|
||||
&.is-active {
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0var (--unit-3);
|
||||
width: 100%;
|
||||
border-radius: var(--rounded-max);
|
||||
height: 0.25rem;
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/components/Pagination.svelte
Normal file
82
src/components/Pagination.svelte
Normal file
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
// TODO: Fix mobile support, currently just cuts off buttons
|
||||
|
||||
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
|
||||
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
|
||||
import IconMinus from 'virtual:icons/heroicons-outline/minus'
|
||||
import Button from './Button.svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let page: number
|
||||
export let count: number
|
||||
|
||||
$: options =
|
||||
count > 4
|
||||
? page + 3 >= count
|
||||
? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
|
||||
: page > 4
|
||||
? [1, '-', page - 1, page, page + 1, '-', count]
|
||||
: [1, 2, 3, 4, 5, '-', count]
|
||||
: Array.from({ length: count }, (_, i) => i + 1)
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
{#if count > 1}
|
||||
<div class="pagination">
|
||||
<Button
|
||||
color="raised"
|
||||
on:click={() => dispatch('change', page - 1)}
|
||||
disabled={page <= 1}
|
||||
title="Last page"
|
||||
><IconArrowLeft height="20px" />
|
||||
</Button>
|
||||
{#each options as option}
|
||||
{#if option === '-'}
|
||||
<IconMinus class="pagination__dash" />
|
||||
{:else}
|
||||
<Button
|
||||
color={option === page ? 'primary' : 'raised'}
|
||||
on:click={() => dispatch('change', option)}>{option}</Button>
|
||||
{/if}
|
||||
{/each}
|
||||
<Button
|
||||
color="raised"
|
||||
on:click={() => dispatch('change', page + 1)}
|
||||
disabled={page >= count}
|
||||
title="Next page">
|
||||
<IconArrowRight height="20px" />
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.pagination {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
:global(.button) {
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
|
||||
}
|
||||
|
||||
:global(.icon) {
|
||||
width: 1rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
:global(&__dash) {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media (width <= 500px) {
|
||||
gap: 0.25rem;
|
||||
|
||||
:global(> *:nth-child(4)),
|
||||
:global(> *:nth-child(6)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
src/components/Select.svelte
Normal file
211
src/components/Select.svelte
Normal file
@@ -0,0 +1,211 @@
|
||||
<script lang="ts">
|
||||
import IconChevronDown from 'virtual:icons/lucide/chevron-down'
|
||||
import IconCheck from 'virtual:icons/heroicons-outline/check'
|
||||
import { clickOutside } from 'svelte-use-click-outside'
|
||||
import { fade } from 'svelte/transition'
|
||||
|
||||
interface Option {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
export let options: Option[] = []
|
||||
export let value: string | number
|
||||
export let selected: Option
|
||||
export let color = ''
|
||||
export let label = ''
|
||||
export let icon = null
|
||||
|
||||
let open = false
|
||||
|
||||
$: if (options) {
|
||||
setSelected()
|
||||
}
|
||||
|
||||
function setSelected() {
|
||||
selected = options.find((option) => option.value === (value || ''))
|
||||
}
|
||||
|
||||
$: if (selected) {
|
||||
value = selected.value
|
||||
}
|
||||
|
||||
// Returns the width of a string based on the font size and family
|
||||
const getTextWidth = Object.assign(
|
||||
(text: string, font: string) => {
|
||||
if (typeof document !== 'undefined') {
|
||||
const canvas =
|
||||
getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'))
|
||||
const context = canvas.getContext('2d')
|
||||
context.font = font
|
||||
const metrics = context.measureText(text)
|
||||
return metrics.width
|
||||
} else {
|
||||
// Return estimate if SSR
|
||||
return text.length * 7.75
|
||||
}
|
||||
},
|
||||
// Reuses the same canvas object
|
||||
{ canvas: null }
|
||||
)
|
||||
|
||||
const minWidth = Math.max(
|
||||
...options.map((it) => getTextWidth(String(it.label || it.value), '16px Inter'))
|
||||
)
|
||||
|
||||
let element: HTMLElement
|
||||
|
||||
function selectOption(option: Option) {
|
||||
selected = option
|
||||
open = false
|
||||
element.focus()
|
||||
}
|
||||
|
||||
function keydown(event: KeyboardEvent) {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
|
||||
if (!open) {
|
||||
open = true
|
||||
// Needs delay before trying to move focus
|
||||
setTimeout(() => (element.children[1].children[0] as HTMLButtonElement).focus(), 0)
|
||||
} else {
|
||||
const option = options.find(
|
||||
({ label }) => label === document.activeElement.innerHTML.trim()
|
||||
)
|
||||
selectOption(option)
|
||||
open = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="select select--color-{color}"
|
||||
class:select--opens-up={false}
|
||||
use:clickOutside={() => {
|
||||
open = false
|
||||
}}
|
||||
bind:this={element}
|
||||
tabindex="0"
|
||||
on:keydown={keydown}
|
||||
on:click>
|
||||
<div
|
||||
class="select__input"
|
||||
on:click={() => {
|
||||
open = true
|
||||
}}>
|
||||
{#if icon}
|
||||
<svelte:component this={icon} />
|
||||
{/if}
|
||||
<span class="select__input__value" style:min-width="{minWidth}px">
|
||||
{label || selected?.label || value || 'Choose...'}
|
||||
</span>
|
||||
<div class="select__input__arrow">
|
||||
<slot name="expandIcon">
|
||||
<IconChevronDown />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
{#if open}
|
||||
<div
|
||||
transition:fade={{ duration: 70 }}
|
||||
class="select__options"
|
||||
style:--selected-index={options.indexOf(selected)}>
|
||||
{#each options as option, index (option.value)}
|
||||
{@const isSelected = selected?.value === option.value}
|
||||
<button
|
||||
on:click={() => selectOption(option)}
|
||||
class:is-selected={isSelected}
|
||||
tabindex={isSelected ? -1 : 0}
|
||||
on:focusout={() => {
|
||||
if (index + 1 === options.length) open = false
|
||||
}}>
|
||||
{option.label || option.value}
|
||||
{#if selected?.value === option.value}
|
||||
<IconCheck />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.select {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-button-text);
|
||||
cursor: pointer;
|
||||
border-radius: var(--rounded);
|
||||
align-self: flex-start;
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
&__options {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: calc(100% * -1 * var(--selected-index));
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating), 0 0 0 1px var(--color-tertiary);
|
||||
/* border: var(--border-width) solid var(--color-tertiary); */
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
|
||||
button {
|
||||
padding: 0.25rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-brand-dark);
|
||||
color: var(--color-brand-dark-contrast);
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background-color: var(--color-brand-light);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--color-raised {
|
||||
> * {
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&--opens-up {
|
||||
.select__options {
|
||||
bottom: 100%;
|
||||
top: auto;
|
||||
border-radius: var(--rounded-top);
|
||||
box-shadow: none;
|
||||
border-top: none;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/components/Slider.svelte
Normal file
48
src/components/Slider.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
export let value: number
|
||||
export let min: number
|
||||
export let max: number
|
||||
export let id: string = undefined
|
||||
</script>
|
||||
|
||||
<div class="slider">
|
||||
<input class="slider__input" type="range" {id} {min} {max} bind:value />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.slider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: var(--rounded-sm);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
background-color: var(--color-button-bg);
|
||||
border: none;
|
||||
padding: 0.25rem 0;
|
||||
width: 20rem;
|
||||
height: 0.5rem;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
cursor: ew-resize;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--rounded-sm);
|
||||
background-color: var(--color-brand);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-brand-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/components/TextInput.svelte
Normal file
67
src/components/TextInput.svelte
Normal file
@@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte'
|
||||
|
||||
export let placeholder = ''
|
||||
export let icon: SvelteComponent = undefined
|
||||
export let value = ''
|
||||
export let multiline = false
|
||||
export let id: string = undefined
|
||||
export let fill = false
|
||||
</script>
|
||||
|
||||
<div class="text-input" class:fill>
|
||||
{#if multiline}
|
||||
<textarea {id} {placeholder} bind:value />
|
||||
{:else}
|
||||
<input type="text" {id} {placeholder} bind:value class:has-icon={icon} />
|
||||
{#if icon}
|
||||
<svelte:component this={icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.text-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
width: 20rem;
|
||||
|
||||
&.fill {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
background-color: var(--color-button-bg);
|
||||
border: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&.has-icon {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
:global(.icon) {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 1rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
src/components/types.d.ts
vendored
Normal file
8
src/components/types.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { SvelteComponentDev } from 'svelte/internal'
|
||||
|
||||
export interface Option {
|
||||
label: string
|
||||
/** The element that will be in the `value` array while the option is checked */
|
||||
value: string | number
|
||||
icon?: SvelteComponentDev | string | any // SvelteComponentDev fails to type check
|
||||
}
|
||||
Reference in New Issue
Block a user