@pokle/basecoat 0.3.10-beta2.pokle

package/docs/src/components/popover.njk

@@ -0,0 +1,174 @@
+---
+layout: layouts/page.njk
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1 (Optional): Include the JavaScript file"
+            id: usage-html-js-1
+          - label: "Step 2: Add your popover HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
+      - label: Jinja and Nunjucks
+        id: usage-macro
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "popover.njk" import popover %}
+
+{% set code_html %}
+{% call popover(
+  id="demo-popover",
+  trigger="Open popover",
+  trigger_attrs={"class": "btn-outline"},
+  popover_attrs={"class": "w-80"}
+) %}
+  <div class="grid gap-4">
+    <header class="grid gap-1.5">
+      <h4 class="leading-none font-medium">Dimensions</h4>
+      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+    </header>
+    <form class="form grid gap-2">
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-width">Width</label>
+        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8" autofocus/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-width">Max. width</label>
+        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-height">Height</label>
+        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-height">Max. height</label>
+        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
+      </div>
+    </form>
+  </div>
+{% endcall %}
+{% endset %}
+
+{{ code_preview("popover", code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
+
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript file</a></h4>
+
+<section class="prose">
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
+</section>
+
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/popover.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-js">
+    Components with JavaScript
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="/installation/#install-cli">
+    Use the CLI
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your popover HTML</a></h4>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;button type="button" popovertarget="{ POPOVER_ID }"&gt;</code></dt>
+    <dd>
+      <p>The trigger to open the popover, can also have the following attributes:</p>
+      <ul>
+        <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+        <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+        <li><code>onclick</code>: a simple function to update <code>aria-expanded</code>.</li>
+      </ul>
+    </dd>
+    <dt><code class="highlight language-html">&lt;div data-popover class="popover" id="{ POPOVER_ID }"&gt;</code></dt>
+    <dd>You can set up the side and alignment of the popover using the <code>data-side</code> and <code>data-align</code> attributes.</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:popover</code></dt>
+    <dd>When the popover opens, the component dispatches a custom (non-bubbling) <code>basecoat:popover</code> event on <code>document</code>. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.</dd>
+  </dl>
+</section>
+
+<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
+
+<div class="prose">
+  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">popover()</code> Nunjucks or Jinja macro for this component.</p>
+</div>
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-macros" target="_blank">
+    Use Nunjucks or Jinja macros
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/popover.html.jinja" target="_blank">
+    Jinja macro
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/popover.njk" target="_blank">
+    Nunjucks macro
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+{% set raw_code %}{% raw %}{% call popover(
+  id="demo-popover",
+  trigger="Open popover",
+  trigger_attrs={"class": "btn-outline"},
+  popover_attrs={"class": "w-80 p-4"}
+) %}
+  <div class="grid gap-4">
+    <header class="grid gap-1.5">
+      <h4 class="leading-none font-medium">Dimensions</h4>
+      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+    </header>
+    <form class="form grid gap-2">
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-width">Width</label>
+        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-width">Max. width</label>
+        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-height">Height</label>
+        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-height">Max. height</label>
+        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
+      </div>
+    </form>
+  </div>
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}

package/docs/src/components/progress.njk

@@ -0,0 +1,44 @@
+---
+layout: layouts/page.njk
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Progress component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+  <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 17%"></div>
+</div>
+<script>
+  setTimeout(() => {
+    document.getElementById('demo-progress').style.width = '66%';
+  }, 500);
+</script>
+{% endset %}
+
+{{ code_preview("progress-default", code_default, class="w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Progress bars are pure HTML composition using Tailwind utility classes. Use a container div for the track and an inner div for the indicator. Set the indicator's width with inline styles or via JavaScript.</p>
+</section>
+
+{% set code_usage %}
+<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+  <div class="bg-primary h-full w-full flex-1 transition-all" style="width: 66%"></div>
+</div>
+{% endset %}
+
+{{ code_block(code_usage) }}
+

package/docs/src/components/radio-group.njk

@@ -0,0 +1,48 @@
+---
+layout: layouts/page.njk
+title: Radio Group
+description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<fieldset class="grid gap-3">
+  <label class="label"><input type="radio" name="radio-group" value="default" class="input">Default</label>
+  <label class="label"><input type="radio" name="radio-group" value="comfortable" class="input" checked>Comfortable</label>
+  <label class="label"><input type="radio" name="radio-group" value="compact" class="input">Compact</label>
+</fieldset>{% endset %}
+{{ code_preview("radio-group", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose">
+  <p>Simply add the <code>input</code> class to your <code>&lt;input type="radio"&gt;</code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form space-y-6 w-full">
+  <div class="flex flex-col gap-3">
+    <label for="demo-form-radio">Notify me about...</label>
+    <fieldset id="demo-form-radio" class="grid gap-3">
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
+    </fieldset>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("radio-group-form", code, "w-full max-w-sm") }}