feat(examples): add hemx html pattern gallery
Add examples/html_examples as a copy-pasteable gallery for the first htmx-style HTML UX patterns using exact htmx URL slugs in the page and README. The slice covers click-to-edit, edit-row, delete-row, inline-validation, click-to-load, and active-search with .heml templates, generated resources, server-owned Rust state, and runtime-free selector targeting. req: htmx_equivalents/001 req: htmx_equivalents/002 req: examples/001
This commit is contained in:
slhx agent
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>hemx HTML examples</title>
|
||||
<script defer="defer" +src="self.runtime_src"></script>
|
||||
</head>
|
||||
<body>
|
||||
{+= self.body =+}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<main data-hemx-root="gallery">
|
||||
<header>
|
||||
<p>Copy-pasteable hemx HTML patterns</p>
|
||||
<h1>HTML UX pattern gallery</h1>
|
||||
<p>Server-owned Rust state, boring .heml, generated resources, and tiny runtime behavior.</p>
|
||||
</header>
|
||||
|
||||
<section id="click-to-edit" data-htmx-example="click-to-edit" aria-labelledby="click-to-edit-heading">
|
||||
<h2 id="click-to-edit-heading">click-to-edit</h2>
|
||||
<div data-hemx-slot="contact_card">
|
||||
<template h-for="contact in &self.contacts" h-key="contact.id">
|
||||
{+ contact +}
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="edit-row" data-htmx-example="edit-row" aria-labelledby="edit-row-heading">
|
||||
<h2 id="edit-row-heading">edit-row</h2>
|
||||
<p id="delete-row" data-htmx-example="delete-row">delete-row uses the same keyed row partial and a generated remove effect.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Task</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody data-hemx-slot="editable_row">
|
||||
<template h-for="row in &self.rows" h-key="row.id">
|
||||
{+ row +}
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="inline-validation" data-htmx-example="inline-validation" aria-labelledby="validation-heading">
|
||||
<h2 id="validation-heading">inline-validation</h2>
|
||||
<form data-hemx-handle="validate_email" data-hemx-form="validate_email">
|
||||
<label>Email <input name="email" +value="self.email" required="required"></label>
|
||||
<button type="submit">Validate</button>
|
||||
<p data-hemx-error-for="email"></p>
|
||||
<p data-hemx-slot="email_status">{+ self.email_status +}</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="click-to-load" data-htmx-example="click-to-load" aria-labelledby="load-heading">
|
||||
<h2 id="load-heading">click-to-load</h2>
|
||||
<ul data-hemx-slot="loaded_row">
|
||||
<template h-for="row in &self.loaded_rows" h-key="row.id">
|
||||
{+ row +}
|
||||
</template>
|
||||
</ul>
|
||||
<form data-hemx-handle="load_more" data-hemx-form="load_more">
|
||||
<input type="hidden" name="request" value="more">
|
||||
<button type="submit">Load more</button>
|
||||
</form>
|
||||
<p data-hemx-slot="load_status">{+ self.load_status +}</p>
|
||||
</section>
|
||||
|
||||
<section id="active-search" data-htmx-example="active-search" aria-labelledby="search-heading">
|
||||
<h2 id="search-heading">active-search</h2>
|
||||
<form data-hemx-handle="search" data-hemx-form="search">
|
||||
<label>Search <input name="query" +value="self.query"></label>
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
<p data-hemx-slot="search_status">{+ self.search_status +}</p>
|
||||
<ul data-hemx-slot="search_result">
|
||||
<template h-for="result in &self.search_results" h-key="result.id">
|
||||
{+ result +}
|
||||
</template>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
@@ -0,0 +1,15 @@
|
||||
<article +data-key="self.id">
|
||||
<div h-if="!self.editing">
|
||||
<h3>{+ self.name +}</h3>
|
||||
<p>{+ self.email +}</p>
|
||||
<form data-hemx-handle="edit_contact" data-hemx-form="edit_contact">
|
||||
<button type="submit" name="id" +value="self.id">Edit</button>
|
||||
</form>
|
||||
</div>
|
||||
<form h-if="self.editing" data-hemx-handle="save_contact" data-hemx-form="save_contact">
|
||||
<input type="hidden" name="id" +value="self.id">
|
||||
<label>Name <input name="name" +value="self.name" required="required"></label>
|
||||
<label>Email <input name="email" +value="self.email" required="required"></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
</article>
|
||||
@@ -0,0 +1,14 @@
|
||||
<tr +data-key="self.id">
|
||||
<td h-if="!self.editing">{+ self.title +}</td>
|
||||
<td h-if="!self.editing">
|
||||
<form data-hemx-handle="edit_row" data-hemx-form="edit_row"><button type="submit" name="id" +value="self.id">Edit</button></form>
|
||||
<form data-hemx-handle="delete_row" data-hemx-form="delete_row"><button type="submit" name="id" +value="self.id">Delete</button></form>
|
||||
</td>
|
||||
<td h-if="self.editing" colspan="2">
|
||||
<form data-hemx-handle="save_row" data-hemx-form="save_row">
|
||||
<input type="hidden" name="id" +value="self.id">
|
||||
<label>Task <input name="title" +value="self.title" required="required"></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -0,0 +1 @@
|
||||
<li +data-key="self.id">{+ self.title +}</li>
|
||||
@@ -0,0 +1 @@
|
||||
<li +data-key="self.id">{+ self.label +}</li>
|
||||
Reference in New Issue
Block a user