diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk index 800fbb2..463868d 100644 --- a/docs/src/_includes/layouts/base.njk +++ b/docs/src/_includes/layouts/base.njk @@ -96,20 +96,6 @@ {% if head %}{{ head | safe }}{% endif %} - -{% include "partials/sidebar.njk" %} - -
-
- {% include "partials/header.njk" %} -
- -
- {{ content | safe }} -
-
- -{% from "toast.njk" import toaster %} -{{ toaster() }} +{{ content | safe }} \ No newline at end of file diff --git a/docs/src/_includes/layouts/layout.njk b/docs/src/_includes/layouts/layout.njk new file mode 100644 index 0000000..c3eecbe --- /dev/null +++ b/docs/src/_includes/layouts/layout.njk @@ -0,0 +1,18 @@ +--- +layout: layouts/base.njk +--- + +{% include "partials/sidebar.njk" %} + +
+
+ {% include "partials/header.njk" %} +
+ +
+ {{ content | safe }} +
+
+ +{% from "toast.njk" import toaster %} +{{ toaster() }} \ No newline at end of file diff --git a/docs/src/_includes/layouts/page.njk b/docs/src/_includes/layouts/page.njk index 4f22e8d..7f577e5 100644 --- a/docs/src/_includes/layouts/page.njk +++ b/docs/src/_includes/layouts/page.njk @@ -1,5 +1,5 @@ --- -layout: layouts/base.njk +layout: layouts/layout.njk ---
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index 54bdfb8..05f9d82 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -344,9 +344,15 @@ .my-6 { margin-block: calc(var(--spacing) * 6); } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } .mt-8 { margin-top: calc(var(--spacing) * 8); } @@ -745,6 +751,9 @@ .overflow-y-auto { overflow-y: auto; } + .rounded { + border-radius: 0.25rem; + } .rounded-\[2px\] { border-radius: 2px; } @@ -857,6 +866,9 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } + .px-\[0\.3rem\] { + padding-inline: 0.3rem; + } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } @@ -869,6 +881,9 @@ .py-4 { padding-block: calc(var(--spacing) * 4); } + .py-\[0\.2rem\] { + padding-block: 0.2rem; + } .pt-2 { padding-top: calc(var(--spacing) * 2); } diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk index 7575a6b..e999a5c 100644 --- a/docs/src/components/alert-dialog.njk +++ b/docs/src/components/alert-dialog.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro --- {% from "macros/code_preview.njk" import code_preview %} @@ -53,12 +53,18 @@ document.addEventListener('alpine:init', () => {
{% lucide "circle-alert" %}

This component requires Javascript.

-
-

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

+
+ +
+ Components with Javascript {% lucide "arrow-right" %} + Use the CLI {% lucide "arrow-right" %} +
{% from "tabs.njk" import tabs %} {% set tabsets = [ @@ -67,9 +73,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="alert-dialog", tabsets=tabsets) }} -

Jinja or Nunjucks

+

Jinja and Nunjucks

-

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

+
+ +
+ + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
{% set raw_code %}{% raw %}{% set footer %} diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk index e67f29b..e2024c1 100644 --- a/docs/src/components/breadcrumb.njk +++ b/docs/src/components/breadcrumb.njk @@ -64,10 +64,22 @@ document.addEventListener('alpine:init', () => {

Usage

+
+ {% lucide "circle-alert" %} +

This component requires Javascript.

+
+
-

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

+
+ Components with Javascript {% lucide "arrow-right" %} + Use the CLI {% lucide "arrow-right" %} +
+ {% from "tabs.njk" import tabs %} {% set tabsets = [ { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, diff --git a/docs/src/components/combobox.njk b/docs/src/components/combobox.njk index b45df85..84c8680 100644 --- a/docs/src/components/combobox.njk +++ b/docs/src/components/combobox.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro - label: Examples id: examples children: @@ -57,12 +57,9 @@ document.addEventListener('alpine:init', () => {
{% lucide "circle-alert" %}

This component requires Javascript.

-
-

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:

    @@ -70,7 +67,14 @@ document.addEventListener('alpine:init', () => {
  • 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).

+ + +
+ Components with Javascript {% lucide "arrow-right" %} + Use the CLI {% lucide "arrow-right" %} +
{% from "tabs.njk" import tabs %} {% set tabsets = [ @@ -79,9 +83,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="combobox", tabsets=tabsets) }} -

Jinja or Nunjucks

+

Jinja and Nunjucks

-

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

+
+ +
+ + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
{% set raw_code %}{% raw %}{% call select( listbox_attrs={"data-empty": "No framework found."}, diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk index c93419e..5f17cb8 100644 --- a/docs/src/components/dialog.njk +++ b/docs/src/components/dialog.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro - label: Examples id: examples children: @@ -69,9 +69,6 @@ document.addEventListener('alpine:init', () => {
{% lucide "circle-alert" %}

This component requires Javascript.

-
-

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

-
@@ -89,8 +86,14 @@ 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" %} + Use the CLI {% lucide "arrow-right" %} +
+ {% from "tabs.njk" import tabs %} {% set tabsets = [ { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, @@ -98,9 +101,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="combobox", tabsets=tabsets) }} -

Jinja or Nunjucks

+

Jinja and Nunjucks

-

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.

+
+ +
+ + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
{% set raw_code %}{% raw %}{% set footer %} diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk index 94ca0be..6fe94c3 100644 --- a/docs/src/components/dropdown-menu.njk +++ b/docs/src/components/dropdown-menu.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro - label: Examples id: examples children: @@ -87,9 +87,6 @@ document.addEventListener('alpine:init', () => {
{% lucide "circle-alert" %}

This component requires Javascript.

-
-

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

-
@@ -113,6 +110,8 @@ document.addEventListener('alpine:init', () => {
  • 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).

    {% from "tabs.njk" import tabs %} @@ -122,9 +121,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="dropdown-menu", tabsets=tabsets) }} -

    Jinja or Nunjucks

    +

    Jinja and Nunjucks

    -

    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.

    +
    + +
    + + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
    {% set raw_code %}{% raw %}{% call dropdown_menu( id="dropdown-menu", diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk index 446ffb6..1584830 100644 --- a/docs/src/components/popover.njk +++ b/docs/src/components/popover.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro --- {% from "macros/code_preview.njk" import code_preview %} @@ -70,25 +70,32 @@ document.addEventListener('alpine:init', () => {
    {% lucide "circle-alert" %}

    This component requires Javascript.

    -
    -

    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:

    + +

    You can set up a few additional options on the <div data-popover> element:

    + + +

    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" %} + Use the CLI {% lucide "arrow-right" %} +
    + {% from "tabs.njk" import tabs %} {% set tabsets = [ { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, @@ -96,11 +103,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="popover", tabsets=tabsets) }} -

    Jinja or Nunjucks

    +

    Jinja and Nunjucks

    -
    -

    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.

    +
    + +
    + + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
    {% set raw_code %}{% raw %}{% call popover( id="demo-popover", diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk index 3b4762c..12850bb 100644 --- a/docs/src/components/select.njk +++ b/docs/src/components/select.njk @@ -10,8 +10,8 @@ toc: id: usage-html - label: HTML + Javascript id: usage-js - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro - label: Examples id: examples children: @@ -78,16 +78,9 @@ document.addEventListener('alpine:init', () => {

    HTML + Javascript

    -
    - {% lucide "circle-alert" %} -

    This component requires Javascript.

    -
    -

    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:

    + +

    As with the Popover component, you can set up a few additional options on the <div data-popover> element:

    + + +

    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" %} + Use the CLI {% lucide "arrow-right" %} +
    + {% from "tabs.njk" import tabs %} {% set tabsets = [ { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, @@ -116,9 +118,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="select", tabsets=tabsets) }} -

    Jinja or Nunjucks

    +

    Jinja and Nunjucks

    -

    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.

    +
    + +
    + + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
    {% set raw_code %}{% raw %}{% call select(name="select-js") %}
    diff --git a/docs/src/components/sidebar.njk b/docs/src/components/sidebar.njk index 57fe572..e21245a 100644 --- a/docs/src/components/sidebar.njk +++ b/docs/src/components/sidebar.njk @@ -1,11 +1,135 @@ --- layout: layouts/page.njk title: Sidebar -description: A responsive table component. +description: A composable, themeable and customizable sidebar component. +toc: + - label: Usage + id: usage + children: + - label: HTML + Javascript + id: usage-default + - label: Jinja and Nunjucks + id: usage-macro --- +{% from "macros/code_preview.njk" import code_preview %} +{% from "macros/code_block.njk" import code_block %} {% from "sidebar.njk" import sidebar %} +

    Usage

    +

    HTML + Javascript

    +
    + {% lucide "circle-alert" %} +

    This component requires Javascript.

    +
    +
    +

    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:

    + +
      +
    • A <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).
      • +
    • A <nav> that contains the actual sidebar with the following children: +
        +
      • A <header> and <footer> for the header and footer of the sidebar (fixed position).
        • +
      • A <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).

    +
    + +{% set code_html %} +{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %} +{% set icon_bot %}{% lucide "bot" %}{% endset %} +{% set icon_settings %}{% lucide "settings" %}{% endset %} + +{% set menu = [ + { type: "group", label: "Getting started", items: [ + { label: "Playground", url: "#", icon: icon_square_terminal }, + { label: "Models", url: "#", icon: icon_bot }, + { label: "Settings", type: "submenu", icon: icon_settings, items: [ + { label: "General", url: "#" }, + { label: "Team", url: "#" }, + { label: "Billing", url: "#" }, + { label: "Limits", url: "#" } + ] } + ]} +] %} + +{{ sidebar( + label="Sidebar navigation", + content_attrs={ + "class": "scrollbar" + }, + menu=menu +) }} +
    +

    Content

    +
    +{% endset %} + +{% set code_script %} + +{% endset %} + +{% from "tabs.njk" import tabs %} +{% set tabsets = [ + { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, + { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") } +] %} +{{ tabs(id="sidebar", tabsets=tabsets) }} + +

    Jinja and Nunjucks

    + +
    +

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

    +
    + +
    + + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
    + +{% set raw_code %}{% raw %}{% set menu = [ + { type: "group", label: "Getting started", items: [ + { label: "Playground", url: "#" }, + { label: "Models", url: "#" }, + { label: "Settings", type: "submenu", items: [ + { label: "General", url: "#" }, + { label: "Team", url: "#" }, + { label: "Billing", url: "#" }, + { label: "Limits", url: "#" } + ] } + ]} +] %} + +{{ sidebar( + label="Sidebar navigation", + menu=menu +) }} +
    +

    Content

    +
    +{% endraw %}{% endset%} +{{ code_block(raw_code, "jinja") }} \ No newline at end of file diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk index ce66836..d61a107 100644 --- a/docs/src/components/tabs.njk +++ b/docs/src/components/tabs.njk @@ -8,8 +8,8 @@ toc: children: - label: HTML + Javascript id: usage-default - - label: Jinja or Nunjucks - id: usage-jinja + - label: Jinja and Nunjucks + id: usage-macro --- {% from "macros/code_preview.njk" import code_preview %} @@ -95,20 +95,25 @@ document.addEventListener('alpine:init', () => {
    {% lucide "circle-alert" %}

    This component requires Javascript.

    -
    -

    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:

    +
    • A <div class="tabs"> which wraps around the entire component and holds it state (e.g. open/close).
    • A <nav role="tablist"> that holds the tab buttons (<button role="tab">).
    • A series of <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).

    +
    + Components with Javascript {% lucide "arrow-right" %} + Use the CLI {% lucide "arrow-right" %} +
    + {% from "tabs.njk" import tabs %} {% set tabsets = [ { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") }, @@ -116,9 +121,26 @@ document.addEventListener('alpine:init', () => { ] %} {{ tabs(id="combobox", tabsets=tabsets) }} -

    Jinja or Nunjucks

    +

    Jinja and Nunjucks

    -

    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.

    +
    + +
    + + Use Nunjucks or Jinja macros + {% lucide "arrow-right" %} + + + Jinja macro + {% lucide "arrow-right" %} + + + Nunjucks macro + {% lucide "arrow-right" %} + +
    {% set raw_code %}{% raw %}{% set account_panel %}
    diff --git a/docs/src/index.njk b/docs/src/index.njk index 6b80bf1..5df0416 100644 --- a/docs/src/index.njk +++ b/docs/src/index.njk @@ -1,5 +1,5 @@ --- -layout: layouts/base.njk +layout: layouts/layout.njk --- {% from "select.njk" import select %} diff --git a/docs/src/installation.njk b/docs/src/installation.njk index 710e3ae..401f249 100644 --- a/docs/src/installation.njk +++ b/docs/src/installation.njk @@ -14,10 +14,14 @@ toc: id: install-css-import - label: That's it id: install-css-done - - label: Components with Javascript code + - label: Components with Javascript id: install-js + - label: Use the CLI + id: install-cli - label: Use Nunjucks or Jinja macros id: install-macros + - label: Theming + id: install-theming --- {% from "macros/code_block.njk" import code_block %} @@ -63,7 +67,7 @@ toc: -

    Components with Javascript code

    +

    Components with Javascript

    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" },