Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow custom classes to be on the button, make the button change the cursor type, and adjust indent on the script to make it consistent with other components

Browse source
This commit is contained in:
Oliver-Akins 2021-12-17 01:43:45 -06:00
parent dc15f29401
commit 64a29437d1
1 changed files with 32 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web-svelte/src/components/SciFi-Button.svelte
View file

@ -1,35 +1,38 @@
<script lang="ts">
export let height: string|number = "50px";
export let width: string|number = "unset";
export let background: string = "#00aa00";
export let handler: (e: Event) => unknown;
export let hoverBackground: string = "transparent";
export let height: string|number = "50px";
export let width: string|number = "unset";
export let background: string = "#00aa00";
export let handler: (e: Event) => unknown;
export let hoverBackground: string = "transparent";
export let classes: string = "";
export let title: string = "";
// Add the units to the height value if not provided, and ensure that the
// provided height is not less than 50 (the default)
$: if (typeof(height) == "string") {
if (height.match(/[0-9]$/)) {
if (height.match(/^[0-4]?[0-9]$/)) {
height = `50`;
};
height = `${height}px`;
};
} else {
if (height < 50) {
height = 50;
// Add the units to the height value if not provided, and ensure that the
// provided height is not less than 50 (the default)
$: if (typeof(height) == "string") {
if (height.match(/[0-9]$/)) {
if (height.match(/^[0-4]?[0-9]$/)) {
height = `50`;
};
height = `${height}px`;
};
} else {
if (height < 50) {
height = 50;
};
height = `${height}px`;
};
// Add the units to the width value if not provided
$: if (typeof(width) == "string") {
if (width.match(/[0-9]$/)) {
width = `${width}px`;
};
} else {
// Add the units to the width value if not provided
$: if (typeof(width) == "string") {
if (width.match(/[0-9]$/)) {
width = `${width}px`;
};
} else {
width = `${width}px`;
};
</script>
<div
@ -38,9 +41,13 @@
--width: {width};
--background-colour: {background};
--hover-background-colour: {hoverBackground};"
class="button-container"
class="button-container {classes}"
>
<button on:click={handler}>
<button
class="clickable"
{title}
on:click|trusted|stopPropagation={handler}
>
<slot></slot>
</button>
</div>