From 7dd05d447371975410663281850b2d2e08b45cfc Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Wed, 7 May 2025 18:58:42 +0800 Subject: [PATCH] Fixing badge links on mobile, closing sidebar on clicked links --- docs/src/_includes/partials/sidebar.njk | 5 +++-- docs/src/components/alert-dialog.njk | 4 ++-- docs/src/components/breadcrumb.njk | 2 +- docs/src/components/combobox.njk | 4 ++-- docs/src/components/dialog.njk | 4 ++-- docs/src/components/dropdown-menu.njk | 4 ++-- docs/src/components/popover.njk | 4 ++-- docs/src/components/select.njk | 4 ++-- docs/src/components/sidebar.njk | 4 ++-- docs/src/components/tabs.njk | 4 ++-- docs/src/components/toast.njk | 4 ++-- src/js/toast.js | 6 ++++-- 12 files changed, 26 insertions(+), 23 deletions(-) diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk index 8b63b97..eb866e1 100644 --- a/docs/src/_includes/partials/sidebar.njk +++ b/docs/src/_includes/partials/sidebar.njk @@ -51,7 +51,8 @@ "hx-boost": "true", "hx-select": "#content", "hx-target": "#content", - "hx-swap": "outerHTML" + "hx-swap": "outerHTML", + "@click": "open = false" } %} {% set icon_home %}{% lucide "house" %}{% endset %} @@ -65,7 +66,7 @@ { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs }, { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs }, { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs }, - { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } } + { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank", "@click": "open = false" } } ]}, { type: 'group', label: 'Components', items: [ { label: "Accordion", url: "/components/accordion", attrs: link_attrs }, diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk index 389b0c1..49d6cf2 100644 --- a/docs/src/components/alert-dialog.njk +++ b/docs/src/components/alert-dialog.njk @@ -61,7 +61,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -89,7 +89,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk index 2f28cef..106c792 100644 --- a/docs/src/components/breadcrumb.njk +++ b/docs/src/components/breadcrumb.njk @@ -75,7 +75,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} diff --git a/docs/src/components/combobox.njk b/docs/src/components/combobox.njk index 4b13fc1..d3488bd 100644 --- a/docs/src/components/combobox.njk +++ b/docs/src/components/combobox.njk @@ -71,7 +71,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -99,7 +99,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk index f19b2b8..206c38b 100644 --- a/docs/src/components/dialog.njk +++ b/docs/src/components/dialog.njk @@ -89,7 +89,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -117,7 +117,7 @@ document.addEventListener('alpine:init', () => {

You can use the dialog() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk index ad5b206..c5c4222 100644 --- a/docs/src/components/dropdown-menu.njk +++ b/docs/src/components/dropdown-menu.njk @@ -114,7 +114,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -142,7 +142,7 @@ document.addEventListener('alpine:init', () => {

You can use the dropdown_menu() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk index 38809a4..8f68e8d 100644 --- a/docs/src/components/popover.njk +++ b/docs/src/components/popover.njk @@ -91,7 +91,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -119,7 +119,7 @@ document.addEventListener('alpine:init', () => {

You can use the popover() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk index 2e549a6..c0b2855 100644 --- a/docs/src/components/select.njk +++ b/docs/src/components/select.njk @@ -106,7 +106,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -134,7 +134,7 @@ document.addEventListener('alpine:init', () => {

You can use the dropdown_menu() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/sidebar.njk b/docs/src/components/sidebar.njk index 6731393..298c464 100644 --- a/docs/src/components/sidebar.njk +++ b/docs/src/components/sidebar.njk @@ -43,7 +43,7 @@ toc:

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -112,7 +112,7 @@ document.addEventListener('alpine:init', () => {

You can use the sidebar() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk index bfcb198..f574234 100644 --- a/docs/src/components/tabs.njk +++ b/docs/src/components/tabs.njk @@ -109,7 +109,7 @@ document.addEventListener('alpine:init', () => {

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -137,7 +137,7 @@ document.addEventListener('alpine:init', () => {

You can use the tabs() Nunjucks or Jinja macro for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk index 30baf29..29acaf9 100644 --- a/docs/src/components/toast.njk +++ b/docs/src/components/toast.njk @@ -67,7 +67,7 @@ toc:

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).

-
+
Components with Javascript {% lucide "arrow-right" %} @@ -205,7 +205,7 @@ document.addEventListener('alpine:init', () => {

You can use the toaster() and toast() Nunjucks or Jinja macros for this component.

-
+
Use Nunjucks or Jinja macros {% lucide "arrow-right" %} diff --git a/src/js/toast.js b/src/js/toast.js index a66bebe..672dafa 100644 --- a/src/js/toast.js +++ b/src/js/toast.js @@ -10,8 +10,10 @@ window.basecoat.registerToast = function(Alpine) { timeoutId: null, init() { - this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000); - this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration); + if (config.duration !== -1) { + this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000); + this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration); + } this.open = true; this.$watch('$store.toaster.isPaused', (isPaused) => { if (!this.open) return;