tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix CheckBoxList SVG icons + Move docs source

Browse Source
This commit is contained in:
venashial
2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/package/components/Avatar.svelte
View File

@@ -1,58 +1,63 @@
<script lang="ts">
// TODO: Make square icon `md` more rounded
import { onMount } from 'svelte'
import { classCombine } from '../utils/classCombine'
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
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'])
$: className = classCombine([
'avatar',
circle && 'avatar--circle',
`avatar--size-${size}`,
floatUp && 'avatar--float-up',
]);
let img
let img;
onMount(() => {
if (img && img.naturalWidth) {
const isPixelated = () => {
if (img.naturalWidth < 96 && img.naturalWidth > 0) {
img.style = 'image-rendering: pixelated;'
img.style = 'image-rendering: pixelated;';
}
}
};
if (img.naturalWidth) {
isPixelated()
isPixelated();
} else {
img.onload = isPixelated
img.onload = isPixelated;
}
}
})
});
</script>
{#if src}
<img {src} bind:this={img} class={className} alt=""/>
<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"
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"
>
<path fill="none" d="M0 0h103.4v103.4H0z"/>
<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"
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>
</svg>
{/if}
<style lang="postcss">
@@ -67,21 +72,21 @@
&-xs {
--size: 2.25rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-sm {
--size: 3rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-md {
--size: 6rem;
border-radius: var(--rounded-lg);
}
&-lg {
--size: 9rem;
border-radius: var(--rounded-lg);
}
}

34
src/package/components/CheckboxList.svelte
View File

@@ -1,32 +1,30 @@
<script lang="ts">
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
import Checkbox from './Checkbox.svelte';
import type { Option } from './types';
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
export let value = [];
export let options: Option[] = [];
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]
if (!value) value = [];
value = [key, ...value];
} else {
value = value.filter((it) => key !== it)
value = value.filter((it) => key !== it);
}
}
};
</script>
<div class="checkbox-list">
<div class="checkbox-list" class:wrap>
{#each options as option}
<Checkbox on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
{#if option.icon && typeof option.icon === 'string'}
{@html option.icon}
{:else if option.icon}
<svelte:component this={option.icon} />
{/if}
{option.label}
</Checkbox>
@@ -45,4 +43,4 @@
grid-gap: 2rem;
}
}
</style>
</style>

52
src/package/components/CheckboxVirtualList.svelte
View File

@@ -1,43 +1,43 @@
<script lang="ts">
// TODO: Add fade out styling on top and bottom
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
import VirtualList from 'svelte-tiny-virtual-list'
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
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 height = 200;
export let value = []
export let options: Option[] = []
export let value = [];
export let options: Option[] = [];
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = []
value = [key, ...value]
if (!value) value = [];
value = [key, ...value];
} else {
value = value.filter((it) => key !== it)
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' : ''}>
<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.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
<Checkbox
checked={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>

4
src/package/components/TextInput.svelte
View File

@@ -2,7 +2,7 @@
import type { SvelteComponent } from 'svelte';
export let placeholder = '';
export let icon: SvelteComponent;
export let icon: SvelteComponent = undefined;
export let value = '';
export let multiline = false;
export let id: string = undefined;
@@ -50,7 +50,7 @@
}
input.has-icon {
padding-left: 40px;
padding-left: 40px;
}
}
</style>

8
src/package/components/types.d.ts vendored Normal file
View 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;
}

2
src/package/styles/classes/card.postcss
View File

@@ -6,7 +6,7 @@
position: relative;
background-color: var(--color-raised-bg);
border-radius: var(--rounded);
border-radius: var(--rounded-lg);
overflow: hidden;
box-shadow: var(--shadow-raised), var(--shadow-inset);

2
src/package/styles/themes/dark.postcss
View File

@@ -31,7 +31,7 @@
--color-bg-contrast: hsl(0, 0%, 100%);
--color-raised-bg: hsl(220, 13%, 25%);
--color-divider: hsl(220, 13%, 50%);
--color-button-bg: hsl(220, 5%, 32%);
--color-button-bg: hsl(222, 13%, 35%);
/* Label colors */
--color-badge-gray-text: hsl(0, 2%, 69%);

2
src/package/styles/variables/borders.postcss
View File

@@ -7,7 +7,7 @@
/* Rounded radii */
--rounded-sm: 8px;
--rounded: 10px;
--rounded-lg: 12px;
--rounded-lg: 14px;
--rounded-max: 100px;
--rounded-top: var(--rounded) var(--rounded) 0 0;
--rounded-bottom: 0 0 var(--rounded) var(--rounded);