mirror of
https://github.com/Nystik-gh/ignis.git
synced 2026-06-17 04:35:53 +00:00
add svelte UI
This commit is contained in:
Nystik
85
ui/components/layout/ConfirmDialog.svelte
Normal file
85
ui/components/layout/ConfirmDialog.svelte
Normal file
@@ -0,0 +1,85 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Modal from "./Modal.svelte";
|
||||
import Button from "../input/Button.svelte";
|
||||
|
||||
export let title = "";
|
||||
export let message = "";
|
||||
export let description = "";
|
||||
export let confirmText = "Confirm";
|
||||
export let confirmVariant = "primary";
|
||||
export let width = "500px";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
|
||||
function onConfirm() {
|
||||
dispatch("confirm");
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
modalRef.dismiss();
|
||||
dispatch("cancel");
|
||||
}
|
||||
|
||||
function onEscape() {
|
||||
onCancel();
|
||||
}
|
||||
|
||||
export function dismiss() {
|
||||
modalRef.dismiss();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal {title} {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
|
||||
<svelte:fragment slot="icon">
|
||||
<slot name="icon" />
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="confirm-body">
|
||||
<p class="confirm-message">{message}</p>
|
||||
{#if description}
|
||||
<p class="confirm-description">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="confirm-footer">
|
||||
<Button variant="secondary" on:click={onCancel}>Cancel</Button>
|
||||
<Button variant={confirmVariant} on:click={onConfirm}>
|
||||
<svelte:fragment slot="icon">
|
||||
<slot name="confirmIcon" />
|
||||
</svelte:fragment>
|
||||
{confirmText}
|
||||
</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.confirm-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.confirm-message {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.confirm-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.confirm-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
130
ui/components/layout/Modal.svelte
Normal file
130
ui/components/layout/Modal.svelte
Normal file
@@ -0,0 +1,130 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { X } from "lucide-svelte";
|
||||
|
||||
export let title = "";
|
||||
export let width = "600px";
|
||||
export let closeOnOverlayClick = true;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let overlayEl;
|
||||
|
||||
function close() {
|
||||
if (overlayEl) {
|
||||
overlayEl.remove();
|
||||
}
|
||||
dispatch("close");
|
||||
}
|
||||
|
||||
function onOverlayClick(e) {
|
||||
if (e.target === overlayEl && closeOnOverlayClick) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if (e.key === "Escape") {
|
||||
dispatch("escape");
|
||||
}
|
||||
}
|
||||
|
||||
export function dismiss() {
|
||||
close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="modal-overlay"
|
||||
bind:this={overlayEl}
|
||||
on:click={onOverlayClick}
|
||||
on:keydown={onKeydown}
|
||||
>
|
||||
<div class="modal-shell" style="width: min({width}, 90vw);">
|
||||
<div class="modal-header">
|
||||
<div class="header-left">
|
||||
<slot name="icon" />
|
||||
<span class="header-title">{title}</span>
|
||||
</div>
|
||||
<button class="close-btn" on:click={close} title="Close">
|
||||
<X size="1.125rem" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
{#if $$slots.footer}
|
||||
<div class="modal-footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-interface);
|
||||
}
|
||||
|
||||
.modal-shell {
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-normal);
|
||||
border-radius: 0.75rem;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem 0.5rem 1.5rem;
|
||||
background: var(--background-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 0.8rem 1.5rem 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
115
ui/components/layout/PromptDialog.svelte
Normal file
115
ui/components/layout/PromptDialog.svelte
Normal file
@@ -0,0 +1,115 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Modal from "./Modal.svelte";
|
||||
import Button from "../input/Button.svelte";
|
||||
|
||||
export let title = "";
|
||||
export let label = "";
|
||||
export let value = "";
|
||||
export let placeholder = "";
|
||||
export let confirmText = "Confirm";
|
||||
export let width = "500px";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
|
||||
function onConfirm() {
|
||||
dispatch("confirm", value);
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
modalRef.dismiss();
|
||||
dispatch("cancel");
|
||||
}
|
||||
|
||||
function onEscape() {
|
||||
onCancel();
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if (e.key === "Enter") {
|
||||
onConfirm();
|
||||
}
|
||||
}
|
||||
|
||||
export function dismiss() {
|
||||
modalRef.dismiss();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
{title}
|
||||
{width}
|
||||
bind:this={modalRef}
|
||||
on:escape={onEscape}
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<svelte:fragment slot="icon">
|
||||
<slot name="icon" />
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="prompt-body">
|
||||
<label class="prompt-label" for="prompt-input">{label}</label>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
id="prompt-input"
|
||||
class="prompt-input"
|
||||
type="text"
|
||||
{placeholder}
|
||||
bind:value
|
||||
on:keydown={onKeydown}
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="prompt-footer">
|
||||
<Button variant="secondary" on:click={onCancel}>Cancel</Button>
|
||||
<Button variant="primary" on:click={onConfirm}>
|
||||
<svelte:fragment slot="icon">
|
||||
<slot name="confirmIcon" />
|
||||
</svelte:fragment>
|
||||
{confirmText}
|
||||
</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.prompt-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.prompt-label {
|
||||
display: block;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.prompt-input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.prompt-input:focus {
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.prompt-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user