btclock/webui-ng
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Lint fixes, add forgejo workflow and e2e tests
Some checks failed
/ check-changes (push) Successful in 7s
Details
/ build (push) Failing after 1m18s
Details

Browse source
This commit is contained in:
Djuri 2025-05-03 18:45:32 +02:00
parent af2f593fb8
commit 5917713b0d
Signed by: djuri
GPG key ID: 61B9B2DDE5AA3AC1
39 changed files with 1666 additions and 1506 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/lib/components/ui/Toast.svelte
View file

@ -1,71 +1,86 @@
<script lang="ts">
type Position =
| 'top-start' | 'top-center' | 'top-end'
| 'middle-start' | 'middle-center' | 'middle-end'
| 'bottom-start' | 'bottom-center' | 'bottom-end';
type AlertType = 'info' | 'success' | 'warning' | 'error';
type Position =
| 'top-start'
| 'top-center'
| 'top-end'
| 'middle-start'
| 'middle-center'
| 'middle-end'
| 'bottom-start'
| 'bottom-center'
| 'bottom-end';
let props = $props();
let message = props.message || '';
let type = (props.type as AlertType) || 'info';
let position = (props.position as Position) || 'bottom-end';
let duration = props.duration || 3000;
let showClose = props.showClose || false;
// Create a new object without the known props
let restProps = { ...props };
delete restProps.message;
delete restProps.type;
delete restProps.position;
delete restProps.duration;
delete restProps.showClose;
type AlertType = 'info' | 'success' | 'warning' | 'error';
let visible = $state(true);
let props = $props();
// Map position prop to DaisyUI classes
const getPositionClasses = (pos: Position): string => {
const [vertical, horizontal] = pos.split('-');
let classes = 'toast';
// Vertical position
if (vertical === 'top') classes += ' toast-top';
if (vertical === 'middle') classes += ' toast-middle';
// bottom is default, no class needed
// Horizontal position
if (horizontal === 'start') classes += ' toast-start';
if (horizontal === 'center') classes += ' toast-center';
if (horizontal === 'end') classes += ' toast-end';
return classes;
};
let message = props.message || '';
let type = (props.type as AlertType) || 'info';
let position = (props.position as Position) || 'bottom-end';
let duration = props.duration || 3000;
let showClose = props.showClose || false;
// Auto-hide the toast after duration
if (duration > 0) {
setTimeout(() => {
visible = false;
}, duration);
}
// Create a new object without the known props
let restProps = { ...props };
delete restProps.message;
delete restProps.type;
delete restProps.position;
delete restProps.duration;
delete restProps.showClose;
const closeToast = () => {
visible = false;
};
let visible = $state(true);
// Map position prop to DaisyUI classes
const getPositionClasses = (pos: Position): string => {
const [vertical, horizontal] = pos.split('-');
let classes = 'toast';
// Vertical position
if (vertical === 'top') classes += ' toast-top';
if (vertical === 'middle') classes += ' toast-middle';
// bottom is default, no class needed
// Horizontal position
if (horizontal === 'start') classes += ' toast-start';
if (horizontal === 'center') classes += ' toast-center';
if (horizontal === 'end') classes += ' toast-end';
return classes;
};
// Auto-hide the toast after duration
if (duration > 0) {
setTimeout(() => {
visible = false;
}, duration);
}
const closeToast = () => {
visible = false;
};
</script>
{#if visible}
<div class={getPositionClasses(position)} {...restProps}>
<div class="alert alert-{type}">
<span>{message}</span>
{#if showClose}
<button class="btn btn-circle btn-xs" onclick={closeToast}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
{/if}
</div>
</div>
{/if}
<div class={getPositionClasses(position)} {...restProps}>
<div class="alert alert-{type}">
<span>{message}</span>
{#if showClose}
<button class="btn btn-circle btn-xs" onclick={closeToast}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
{/if}
</div>
</div>
{/if}