Pre Release New Changes
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
component Modal {
|
||||
props {
|
||||
@event onConfirmed = function
|
||||
}
|
||||
|
||||
state isOpen = false
|
||||
|
||||
functions {
|
||||
function confirmed() {
|
||||
isOpen = false;
|
||||
if(onConfirmed) {
|
||||
onConfirmed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<main
|
||||
class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
|
||||
@click="isOpen = true"
|
||||
>
|
||||
Open Transparent Modal
|
||||
</button>
|
||||
|
||||
<div
|
||||
class:hidden="isOpen == false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative z-10"
|
||||
>
|
||||
<div
|
||||
class="mb-6 flex items-start justify-between gap-4"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
|
||||
>
|
||||
Transparent Modal
|
||||
</p>
|
||||
|
||||
<h2
|
||||
class="text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
>
|
||||
Welcome to WRNexusJS
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
|
||||
>
|
||||
This modal uses a transparent glass background with blur,
|
||||
soft borders, and theme-aware colors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close modal"
|
||||
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
|
||||
>
|
||||
<p
|
||||
class="text-sm text-[var(--wire-color-text-muted)]"
|
||||
>
|
||||
You can place forms, confirmation messages, account details,
|
||||
images, or any other component inside this modal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
|
||||
@click="confirmed()"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
||||
style {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// Global document layout. The framework renders this once around the selected
|
||||
// page layout and merges SEO metadata, styles, and scripts into <head>/<body>.
|
||||
// Request cookies, resolved theme, language, URL, and pathname are available
|
||||
// as SSR props, so document attributes do not need a client-side correction.
|
||||
layout Document {
|
||||
props {
|
||||
cookies = {}
|
||||
theme = "light"
|
||||
language = "en"
|
||||
url = ""
|
||||
pathname = "/"
|
||||
}
|
||||
|
||||
view {
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<div
|
||||
id="app"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
page ModalPage {
|
||||
|
||||
functions {
|
||||
function onConfirmed() {
|
||||
alert("User Confirmed")
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<Modal
|
||||
onConfirmed={onConfirmed}
|
||||
/>
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -7,6 +7,7 @@
|
||||
* components are `.wrn`/`.tsx` files under app/. Paths are relative to this file.
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
@plugin "@iconify/tailwind4";
|
||||
@source "../**/*.wrn";
|
||||
@source "../**/*.tsx";
|
||||
|
||||
@@ -44,9 +45,7 @@ body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
@@ -17,11 +17,14 @@
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/validation": "workspace:*",
|
||||
"@wrnexus/db": "workspace:*"
|
||||
"@wrnexus/db": "workspace:*",
|
||||
"@wrnexus/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wrnexus/test": "workspace:*",
|
||||
"@eslint/js": "latest",
|
||||
"@iconify-json/lucide": "^1.2.118",
|
||||
"@iconify/tailwind4": "^1.2.3",
|
||||
"@tailwindcss/cli": "^4.0.0",
|
||||
"eslint": "latest",
|
||||
"prettier": "^3.9.4",
|
||||
|
||||
Reference in New Issue
Block a user