brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds user management

Browse Source
This commit is contained in:
Christian Beutel
2024-02-02 22:48:24 +01:00
parent 99f743ec94
commit 905995a01c
60 changed files with 1135 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/base/dropdown.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let items: { text: string; value: any }[] = [];
export let items: { text: string; value: any; icon?: string }[] = [];
export let size: string = "regular";
const dispatch = createEventDispatcher();
@@ -26,28 +27,31 @@
<svelte:window on:mouseup={() => (isOpen = false)} />
<div class="dropdown relative">
<button
class="hover:bg-gray-100 w-8 h-8 rounded-full"
on:click={toggleMenu}
type="button"
>
<i class="fa fa-ellipsis-vertical"></i>
<button class="flex items-center justify-center" on:click={toggleMenu} type="button">
<slot>
<i
class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 px-[14px] py-2 rounded-full hover:bg-opacity-50"
></i>
</slot>
</button>
{#if isOpen}
<ul
class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md z-10 right-0 overflow-hidden"
class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden text-black"
class:none={isOpen}
style="z-index: 1001"
>
{#each items as item}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li
class="menu-item p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
class="menu-item flex items-center p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
tabindex="0"
on:mouseup|stopPropagation={() => handleItemClick(item)}
on:keydown|stopPropagation={() => handleItemClick(item)}
>
{#if item.icon}
<i class="fa fa-{item.icon} mr-6"></i>
{/if}
{item.text}
</li>
{/each}

4
web/src/lib/components/base/select.svelte
View File

@@ -7,9 +7,9 @@
<div>
{#if label.length}
<p class="text-sm font-medium pb-1">
<label for={name} class="text-sm font-medium pb-1">
{label}
</p>
</label>
{/if}
<select
{name}

14
web/src/lib/components/base/text_field.svelte
View File

@@ -5,13 +5,19 @@
export let label: string = "";
export let error: string = "";
export let icon: string = "";
export let extraClasses: string = "";
export let type: "text" | "password" = "text";
function typeAction(node: HTMLInputElement) {
node.type = type;
}
</script>
<div>
{#if label.length}
<p class="text-sm font-medium pb-1">
<label for={name} class="text-sm font-medium pb-1">
{label}
</p>
</label>
{/if}
<div class="flex items-center gap-2">
{#if icon.length > 0}
@@ -19,10 +25,10 @@
{/if}
<input
{name}
class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full {extraClasses}"
class:border-red-400={error.length > 0}
class:bg-red-50={error.length > 0}
type="text"
use:typeAction
bind:value
on:change
{placeholder}

51
web/src/lib/components/base/toast.svelte
View File

@@ -1,27 +1,44 @@
<script lang="ts">
import { toast } from "$lib/stores/toast_store";
import { fade } from "svelte/transition";
$: getBackgroundColor = () => {
if ($toast && $toast.type == "success") {
return "green-200";
}
return "";
};
$: getBorderColor = () => {
if ($toast && $toast.type == "success") {
return "green-500";
}
return "";
};
function closeToast() {
toast.set(null);
}
</script>
{#if $toast}
<div
class="fixed px-8 py-4 shadow-xl rounded-xl border bottom-4 right-4 bg-{getBackgroundColor()} border-{getBorderColor()}"
style="z-index: 1000;"
class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center"
style="z-index: 1001;"
in:fade={{ duration: 250 }}
out:fade={{ duration: 250 }}
>
<i class="fa fa-{$toast.icon} mr-2"></i>
<span>{$toast.text}</span>
<span>
<i
class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
class:success-toast={$toast.type == "success"}
class:error-toast={$toast.type == "error"}
></i>{$toast.text}</span
>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white ml-6"
on:click={closeToast}
>
<i class="fa fa-close"></i>
<span class="sr-only">Close modal</span>
</button>
</div>
{/if}
<style>
.success-toast {
color: #10b981;
background-color: #a7f3d0;
}
.error-toast {
color: #ef4444;
background-color: #fecaca;
}
</style>

18
web/src/lib/components/base/toggle.svelte Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts">
export let name: string = "";
export let value: boolean = false;
export let label: string = "";
export let error: string = "";
</script>
<label class="relative my-2 inline-flex items-center cursor-pointer">
<input {name} bind:checked={value} type="checkbox" class="sr-only peer" value="1"/>
<div
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"
></div>
<span class="ms-3 text-sm font-medium">{label}</span>
</label>
<span class="toggle-error text-xs text-red-400">
{error}
</span>