- {{ content | safe }}
-
-You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
The Alert Dialog component uses the same Alpine.js code as the Dialog component with one small difference: we set initialCloseOnOverlayClick to false to prevent the dialog from closing when the overlay is clicked.
The Alert Dialog component uses the same Alpine.js code as the Dialog component with one small difference: we set initialCloseOnOverlayClick to false to prevent the dialog from closing when the overlay is clicked.
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the dialog() macro directly, making sure to set close_on_overlay_click and close_button to False (or false for Nunjucks). Read more about using Basecoat with Jinja and Nunjucks.
You can use the dialog() Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set close_on_overlay_click and close_button to False (or false for Nunjucks).
The example above uses some simple Tailwind CSS along with the Dropdown Menu.
+This example uses some simple Tailwind CSS styles along with the Dropdown Menu.
+ +You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
Combobox uses the same Alpine.js code and markup as the Select component, the only difference being the search box at the top of the listbox.
You can set up a few additional options on the <div data-popover> element:
data-align can be set to start, center, or end to change the alignment of the popover.data-empty to set up the message when the search is empty.You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the select() macro directly, making sure to set is_combobox to True (or true for Nunjucks). Read more about using Basecoat with Jinja and Nunjucks.
You can use the select() Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set is_combobox to True (or true for Nunjucks).
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the dialog() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
You can use the dialog() Nunjucks or Jinja macro for this component.
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
data-side can be set to top, bottom, left, or right to change the side of the popover.data-align can be set to start, center, or end to change the alignment of the popover.You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the dropdown_menu() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
You can use the dropdown_menu() Nunjucks or Jinja macro for this component.
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
The component is structured as such:
+<div class="popover"> which wraps around the entire component and holds it state (e.g. open/close).<button> that acts as the trigger to open or close the popover.<div data-popover> that holds the content of the popover.You can set up a few additional options on the <div data-popover> element:
data-side can be set to top, bottom, left, or right to change the side of the popover.data-align can be set to start, center, or end to change the alignment of the popover.You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the popover() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
You can use the popover() Nunjucks or Jinja macro for this component.
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
If you need to do more than what <select> allows (e.g. HTML options), you can use this component. It is structured as such:
<div class="popover"> which wraps around the entire component and holds it state (e.g. open/close).<button> that acts as the trigger to open or close the popover.<input type="hidden"> to hold the value of the field (if needed).As with the Popover component, you can set up a few additional options on the <div data-popover> element:
data-side can be set to top, bottom, left, or right to change the side of the popover.data-align can be set to start, center, or end to change the alignment of the popover.You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the dropdown_menu() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
You can use the dropdown_menu() Nunjucks or Jinja macro for this component.
To use a sidebar, you will need the sidebar itself and a sibling container for the content of the page (e.g. <main>), with the following structure for the sidebar:
<div class="sidebar"> which wraps around the entire component and holds it state (e.g. open/close). It accepts an optional data-side set to left, or right to specify the side of the sidebar (defaults to left).<nav> that contains the actual sidebar with the following children:
+ <header> and <footer> for the header and footer of the sidebar (fixed position).<section> for the main navigation list. To add links, you must wrap them in a <div role="group"> first. These groups can contain <h3"> for group headings and lists (i.e. <ul>) of links or buttons. You can also use <details> to wrap around collapsbile sections.Any elememt on the page can toggle, open or close the sidebar by dispatching the sidebar:toggle, sidebar:open or sidebar:close events.
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
You can use the sidebar() Nunjucks or Jinja macro for this component.
You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. x-bind, x-data, @click).
The component is structured as such:
+<div class="tabs"> which wraps around the entire component and holds it state (e.g. open/close).<nav role="tablist"> that holds the tab buttons (<button role="tab">).<div role="tabpanel"> that holds the tab panels corresponding to each tab button.You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
If you use Jinja (or Nunjucks), you can use the tabs() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
You can use the tabs() Nunjucks or Jinja macro for this component.
To use toasts, you will first need to set up the toaster code to the end of your <body> (see HTML below).
The <template id="toast-template"> bit is only required if you plan on using the $toast() method (see below).
You will also need to include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
Once that's in place, we can do one of two things:
+ +<div class="toast"> to the toaster.$toast() Alpine.js "magic method".To display a toast, just append the following to the toaster:
+This is a toast.
+You can implement the layout you want within the toast, but here is the standard format used in the examples above:
+When setting up x-data, you can pass a config object with `category` (e.g. "success", "error", "info", "warning") and `duration` (in milliseconds). By default, the duration will be 3 seconds, and 5 seconds for errors.
This approach is used in the first example with HTMX: when the button is clicked, we retrieve the a fragment that contains the markup for the toast and append it to #toaster.
If you want to display a toast directly from the front-end, you can use the $toast() Alpine.js magic method. This is what we're doing in the second example above:
The $toast() method accepts a config object with the following properties:
duration (optional): the duration of the toast in milliseconds. By default, the duration will be 3 seconds, or 5 seconds if category is "error".category (optional): "success", "error", "info", "warning" or any arbitrary string.title (optional): the title of the toast.description (optional): the description of the toast.action (optional): an object to define an action button:
+ label: the label of the action button.click (optional): a string of Javascript to execute when the button is clicked.url (optional): a URL to link to when the button is clicked.cancel (optional): an object to define a cancel button (similar structure to action).You can use the toaster() and toast() Nunjucks or Jinja macros for this component.
Some components require Javascript code to work.
diff --git a/docs/src/kitchen-sink.njk b/docs/src/kitchen-sink.njk index 00f3ea5..d84f68b 100644 --- a/docs/src/kitchen-sink.njk +++ b/docs/src/kitchen-sink.njk @@ -1,5 +1,5 @@ --- -layout: layouts/base.njk +layout: layouts/layout.njk --- {% set components = [ { label: "Accordion", id: "accordion" }, diff --git a/src/css/basecoat.css b/src/css/basecoat.css index 64f355e..f9f6099 100644 --- a/src/css/basecoat.css +++ b/src/css/basecoat.css @@ -150,17 +150,6 @@ [x-cloak] { display: none !important; } - /* HTMX */ - .htmx-indicator { - @apply invisible opacity-0 transition-discrete transition-all; - } - .htmx-indicator:not(.htmx-request) { - @apply hidden; - } - .htmx-request, - .htmx-request.htmx-indicator { - @apply visible opacity-100; - } } /* Alert */ diff --git a/src/js/toast.js b/src/js/toast.js index 0580453..a66bebe 100644 --- a/src/js/toast.js +++ b/src/js/toast.js @@ -36,6 +36,11 @@ window.basecoat.registerToast = function(Alpine) { this.open = false; this.$el.blur(); }, + executeAction(actionString) { + if (actionString) { + Alpine.evaluate(this.$el, actionString); + } + }, $toastBindings: { ['@mouseenter']() { this.$store.toaster.isPaused = true }, @@ -50,7 +55,7 @@ window.basecoat.registerToast = function(Alpine) { const template = document.getElementById('toast-template'); if (!toaster) { - console.error(`Toaster container with id #${targetId} not found.`); + console.error(`Toaster container with id #${toasterId} not found.`); return; } if (!template) { diff --git a/src/nunjucks/toast.njk b/src/nunjucks/toast.njk index 152e1f0..10e9e8a 100644 --- a/src/nunjucks/toast.njk +++ b/src/nunjucks/toast.njk @@ -3,17 +3,7 @@ Can render the initial container or be used with htmx OOB swaps to add toasts dynamically. @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container. - @param toasts {array} [optional] - An array of toast objects to render initially. - Each toast object can have: - - category {string} [optional]: Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role. - - title {string} [optional]: The main title text of the toast. - - description {string} [optional]: The secondary description text. - - duration {number} [optional] [default=5000]: Duration in milliseconds before the toast auto-dismisses. - - action {object} [optional]: Defines an action button. - - label {string}: Button text. - - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')'). - - url {string}: URL for an anchor link button. - - cancel {object} [optional]: Defines a cancel/dismiss button (similar structure to action). + @param toasts {array} [optional] - An array of toast objects to render initially. See thetoast() macro for more details.
@param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
@param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
#}
@@ -23,13 +13,6 @@
main_attrs=None,
is_fragment=false
) %}
-{% set icons = {
- 'success': '',
- 'error': '',
- 'info': '',
- 'warning': ''
-} %}
-
{{ toast.description }}
- {% endif %} -{{ description }}
+ {% endif %} +