hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 21:58:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

PoC for new components, including select

Browse Source
This commit is contained in:
Ronan Berder
2025-06-12 10:37:19 +08:00
parent cdc52a810e
commit 3b0b38a4cf
38 changed files with 1551 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/alert-dialog.njk
+4 -4
View File
@@ -18,8 +18,8 @@ toc:
{% set code_html %}
{% set footer %}
<button class="btn-outline" @click="open = false">Cancel</button>
<button class="btn-primary" @click="open = false">Continue</button>
<button class="btn-outline" onClick="document.getElementById('alert-dialog').close()">Cancel</button>
<button class="btn-primary" onClick="document.getElementById('alert-dialog').close()">Continue</button>
{% endset %}
{{ dialog(
id="alert-dialog",
@@ -105,8 +105,8 @@ document.addEventListener('alpine:init', () => {
</div>
{% set raw_code %}{% raw %}{% set footer %}
<button class="btn-outline" @click="open = false">Cancel</button>
<button class="btn-primary" @click="open = false">Continue</button>
<button class="btn-outline" onClick="document.getElementById('demo-alert-dialog').close()">Cancel</button>
<button class="btn-primary" onClick="document.getElementById('demo-alert-dialog').close()">Continue</button>
{% endset %}
{{ dialog(
id="demo-alert-dialog",
docs/src/components/dialog.njk
+3 -3
View File
@@ -23,8 +23,8 @@ toc:
{% set code_html %}
{% set footer %}
<button class="btn-outline" @click="open = false">Cancel</button>
<button class="btn" @click="open = false">Save changes</button>
<button class="btn-outline" onClick="this.closest('dialog').close()">Cancel</button>
<button class="btn" onClick="this.closest('dialog').close()">Save changes</button>
{% endset %}
{% call dialog(
id="demo-dialog-edit-profile",
@@ -175,7 +175,7 @@ document.addEventListener('alpine:init', () => {
{% set code %}
{% set footer %}
<button class="btn-outline" @click="open = false">Close</button>
<button class="btn-outline" onClick="this.closest('dialog').close()">Close</button>
{% endset %}
{% call dialog(
id="dialog-example",
docs/src/components/popover.njk
+3 -4
View File
@@ -21,8 +21,7 @@ toc:
id="demo-popover",
trigger="Open popover",
trigger_attrs={"class": "btn-outline"},
content_attrs={"class": "w-80 p-4"},
register_on=["alpine:init", "htmx:afterSwap"]
popover_attrs={"class": "w-80"}
) %}
<div class="grid gap-4">
<header class="grid gap-1.5">
@@ -52,13 +51,13 @@ toc:
{% endset %}
{% set code_script %}
<script>
{# <script>
{% fetchCode "src/js/popover.js" %}
document.addEventListener('alpine:init', () => {
window.basecoat.registerPopover(Alpine);
});
</script>
</script> #}
{% endset %}
{{ code_preview("popover", code_script | prettyHtml ~ code_html | prettyHtml) }}
docs/src/components/select.njk
+31 -30
View File
@@ -34,34 +34,30 @@ toc:
<option>Blueberry</option>
<option>Grapes</option>
<option>Pineapple</option>
</optgroup>
</select>{% endset %}
{{ code_preview("select-native", code_native) }}
{% set code_html %}
{% call select(
name="select-js",
{{ select(
trigger_attrs={"class": "w-[180px]"},
register_on=["alpine:init", "htmx:afterSwap"]
) %}
<div role="group" aria-labelledby="fruit-options-label">
<span id="fruit-options-label" role="heading">Fruits</span>
<div role="option" data-value="apple">Apple</div>
<div role="option" data-value="banana">Banana</div>
<div role="option" data-value="blueberry">Blueberry</div>
<div role="option" data-value="pineapple">Grapes</div>
<div role="option" data-value="pineapple">Pineapple</div>
</div>
{% endcall %}
items=[
{
type: "group",
label: "Fruits",
items: [
{ type: "item", value: "apple", label: "Apple" },
{ type: "item", value: "banana", label: "Banana" },
{ type: "item", value: "blueberry", label: "Blueberry" },
{ type: "item", value: "pineapple", label: "Grapes" },
{ type: "item", value: "pineapple", label: "Pineapple" }
]
}
]
) }}
{% endset %}
{% set code_script %}
<script>
{% fetchCode "src/js/select.js" %}
document.addEventListener('alpine:init', () => {
window.basecoat.registerSelect(Alpine);
});
</script>
{% endset %}
{{ code_preview("select", code_script | prettyHtml ~ code_html | prettyHtml) }}
@@ -153,16 +149,21 @@ document.addEventListener('alpine:init', () => {
</a>
</div>
{% set raw_code %}{% raw %}{% call select(name="select-js") %}
<div role="group" aria-labelledby="fruit-options-label">
<span id="fruit-options-label" role="heading">Fruits</span>
<div role="option" data-value="apple">Apple</div>
<div role="option" data-value="banana">Banana</div>
<div role="option" data-value="blueberry">Blueberry</div>
<div role="option" data-value="pineapple">Grapes</div>
<div role="option" data-value="pineapple">Pineapple</div>
</div>
{% endcall %}{% endraw %}{% endset %}
{% set raw_code %}{% raw %}{{ select(
items=[
{
type: "group",
label: "Fruits",
items: [
{ type: "item", value: "apple", label: "Apple" },
{ type: "item", value: "banana", label: "Banana" },
{ type: "item", value: "blueberry", label: "Blueberry" },
{ type: "item", value: "pineapple", label: "Grapes" },
{ type: "item", value: "pineapple", label: "Pineapple" }
]
}
]
) }}{% endraw %}{% endset %}
{{ code_block(raw_code, "jinja") }}
<h2 id="examples"><a href="#examples">Examples</a></h2>
docs/src/components/test.njk
+17
View File
@@ -0,0 +1,17 @@
---
layout: layouts/base.njk
---
<div id="my-popover" open popover="manual">
SOMETHING
SOMETHING
SOMETHING
SOMETHING
SOMETHING
</div>
<button popovertarget="my-popover">
TOGGLE SIDEBAR
</button>
docs/src/components/toast.njk
+2 -2
View File
@@ -84,13 +84,13 @@ toc:
{% set code_script %}
<script>
{# <script>
{% fetchCode "src/js/popover.js" %}
document.addEventListener('alpine:init', () => {
window.basecoat.registerPopover(Alpine);
});
</script>
</script> #}
{% endset %}
{% set code_html_toaster %}{{ toaster() }}{% endset %}