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

Finishing Field

Browse Source
This commit is contained in:
Ronan Berder
2025-11-05 11:25:13 +08:00
parent b8d8b1741c
commit f367ebac2a
7 changed files with 143 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/assets/styles.css
+65 -10
View File
@@ -39,6 +39,7 @@
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-3xl: 48rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
@@ -596,6 +597,9 @@
.w-max {
width: max-content;
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-72 {
max-width: calc(var(--spacing) * 72);
}
@@ -659,6 +663,9 @@
.shrink-0 {
flex-shrink: 0;
}
.basis-full {
flex-basis: 100%;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -761,6 +768,9 @@
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.gap-7 {
gap: calc(var(--spacing) * 7);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
@@ -1673,16 +1683,41 @@
width: 239px;
}
}
.md\:w-auto {
@media (width >= 48rem) {
width: auto;
}
}
.md\:max-w-\[200px\] {
@media (width >= 48rem) {
max-width: 200px;
}
}
.md\:min-w-80 {
@media (width >= 48rem) {
min-width: calc(var(--spacing) * 80);
}
}
.md\:flex-auto {
@media (width >= 48rem) {
flex: auto;
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
}
}
.md\:items-center {
@media (width >= 48rem) {
align-items: center;
}
}
.md\:items-start {
@media (width >= 48rem) {
align-items: flex-start;
}
}
.md\:border-l {
@media (width >= 48rem) {
border-left-style: var(--tw-border-style);
@@ -3556,9 +3591,6 @@
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
& + p {
margin-top: calc(var(--spacing) * -1.5);
}
}
}
.field {
@@ -3609,8 +3641,26 @@
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
}
&[data-orientation='horizontal'] {
flex-direction: row;
align-items: center;
&:has(>section) {
align-items: flex-start;
}
& p {
text-wrap: balance;
}
&:has(>section) {
&>[type=checkbox],[type=radio] {
margin-top: 1px;
}
}
&>label {
flex: auto;
}
}
}
.fieldset legend + p, .field p {
.fieldset legend + p, .field > p, .field section > p {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: var(--leading-normal);
@@ -3618,12 +3668,6 @@
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-muted-foreground);
&:last-child {
margin-top: calc(var(--spacing) * 0);
}
&:nth-last-child(2) {
margin-top: calc(var(--spacing) * -1);
}
&>a {
text-decoration-line: underline;
}
@@ -3634,6 +3678,17 @@
color: var(--color-primary);
}
}
.fieldset legend + p {
margin-top: calc(var(--spacing) * -1.5);
}
.field > p {
&:last-child {
margin-top: calc(var(--spacing) * 0);
}
&:nth-last-child(2) {
margin-top: calc(var(--spacing) * -1);
}
}
}
@layer components {
:is(.form, .field) input[type='text'], :is(.form, .field) input[type='email'], :is(.form, .field) input[type='password'], :is(.form, .field) input[type='number'], :is(.form, .field) input[type='file'], :is(.form, .field) input[type='tel'], :is(.form, .field) input[type='url'], :is(.form, .field) input[type='search'], :is(.form, .field) input[type='date'], :is(.form, .field) input[type='datetime-local'], :is(.form, .field) input[type='month'], :is(.form, .field) input[type='week'], :is(.form, .field) input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='file'], .input[type='tel'], .input[type='url'], .input[type='search'], .input[type='date'], .input[type='datetime-local'], .input[type='month'], .input[type='week'], .input[type='time'] {
docs/src/components/field.njk
+56 -13
View File
@@ -22,16 +22,13 @@ toc:
id: example-radio
- label: Switch
id: example-switch
- label: Responsive Layout
id: example-responsive
---
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
<div class="alert-destructive">
{% lucide "triangle-alert"%}
<h2>This component is still under development, API may change.</h2>
</div>
{% set code_demo %}
<form class="w-full max-w-md space-y-6">
<fieldset class="fieldset">
@@ -129,7 +126,7 @@ toc:
<p><strong>Fields</strong> have the following HTML structure:</p>
<dl>
<dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code></dt>
<dd>Field container.
<dd>Field container. Add <code>data-orientation="horizontal"</code> to align controls horizontally. For responsive layouts, use standard Tailwind responsive classes.
<dl>
<dt><code class="highlight language-html">&lt;label&gt;</code></dt>
<dd>Label for the input.</dd>
@@ -139,6 +136,8 @@ toc:
<dd>Helper text. Use <code>aria-describedby</code> on the input to reference this element's <code>id</code>.</dd>
<dt><code class="highlight language-html">&lt;p role="alert"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Error message. Use <code>aria-describedby</code> on the input and <code>aria-invalid="true"</code> to reference this element's <code>id</code>.</dd>
<dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Wraps label and description when the label sits beside the input (e.g. <code>data-orientation="horizontal"</code>). Not required if you have no description.</dd>
</dl>
</dd>
</dl>
@@ -321,14 +320,14 @@ toc:
<hr role="separator">
<div class="field">
<div class="flex w-full gap-3 flex-row items-center">
<div class="field" data-orientation="horizontal">
{# <div class="flex w-full items-center gap-3"> #}
<input id="sync-desktop-documents" type="checkbox" checked class="input self-start">
<section>
<label for="sync-desktop-documents">Sync Desktop & Documents folders</label>
<p>Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.</p>
</section>
</div>
{# </div> #}
</div>
</fieldset>
{% endset %}
@@ -370,11 +369,11 @@ toc:
<h3 id="example-switch"><a href="#example-switch">Switch</a></h3>
<section class="prose">
<p>Use horizontal layout for switches by wrapping in a flex container.</p>
<p>Set <code>data-orientation="horizontal"</code> on <code>.field</code> to align labels and controls side-by-side.</p>
</section>
{% set code_switch %}
<div role="group" class="field flex-row">
<div role="group" class="field" data-orientation="horizontal">
<section>
<label for="multi-factor-authentication">Multi-factor authentication</label>
<p>Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.</p>
@@ -410,7 +409,51 @@ toc:
<input id="choice-card" type="radio" name="choice-card" class="self-start">
</label>
</div>
</div>
</fieldset>
{% endset %}
{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }}
{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }}
<h3 id="example-responsive"><a href="#example-responsive">Responsive Layout</a></h3>
<section class="prose">
<p>For responsive layouts, use standard Tailwind responsive classes directly on <code>.field</code>. This example stacks vertically on mobile and switches to horizontal at the <code>md</code> breakpoint.</p>
</section>
{% set code_responsive %}
<fieldset class="fieldset">
<legend>Profile</legend>
<p>Keep your profile details up to date.</p>
<hr role="separator">
<div class="flex flex-col gap-7">
<div role="group" class="field flex-col md:flex-row md:items-center">
<section class="md:flex-auto">
<label for="profile-name">Name</label>
<p id="profile-name-desc">Provide your full name for identification.</p>
</section>
<input id="profile-name" type="text" placeholder="Evil Rabbit" aria-describedby="profile-name-desc" class="md:w-auto md:min-w-80">
</div>
<hr role="separator">
<div role="group" class="field flex-col md:flex-row md:items-start">
<section class="md:flex-auto">
<label for="profile-bio">Message</label>
<p id="profile-bio-desc">You can write your message here. Keep it short, preferably under 100 characters.</p>
</section>
<textarea id="profile-bio" rows="3" placeholder="Hello, world!" aria-describedby="profile-bio-desc" class="md:w-auto md:min-w-80"></textarea>
</div>
<hr role="separator">
<div role="group" class="field flex-col md:flex-row md:items-center">
<button type="submit" class="btn md:w-auto">Submit</button>
<button type="button" class="btn-outline md:w-auto">Cancel</button>
</div>
</div>
</fieldset>
{% endset %}
{{ code_preview("field-responsive", code_responsive, class="w-full max-w-3xl") }}
docs/src/components/spinner.njk
+3 -4
View File
@@ -203,13 +203,12 @@ toc:
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">129 MB / 1000 MB</p>
</div>
<button class="btn-sm-outline self-start">Cancel</button>
<footer class="w-full">
<footer class="flex basis-full items-center justify-between gap-2">
<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: 13%"></div>
<div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
</div>
</footer>
</article>
{% endset %}
{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}
{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat",
"version": "0.3.2",
"version": "0.3.3",
"description": "shadcn/ui for the rest of us",
"author": "hunvreus",
"type": "module",
packages/cli/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat-cli",
"version": "0.3.2",
"version": "0.3.3",
"description": "Add Basecoat components to your project",
"author": "hunvreus",
"license": "MIT",
packages/css/package.json
+4 -3
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat-css",
"version": "0.3.2",
"version": "0.3.3",
"description": "Tailwind CSS for Basecoat components",
"author": {
"name": "hunvreus",
@@ -26,8 +26,7 @@
"css",
"html",
"jinja",
"nunjucks",
"alpinejs"
"nunjucks"
],
"repository": {
"type": "git",
@@ -43,6 +42,8 @@
"./css": "./dist/basecoat.css",
"./all": "./dist/js/all.js",
"./all.min": "./dist/js/all.min.js",
"./command": "./dist/js/command.js",
"./command.min": "./dist/js/command.min.js",
"./dropdown-menu": "./dist/js/dropdown-menu.js",
"./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
"./popover": "./dist/js/popover.js",
src/css/basecoat.css
+13 -6
View File
@@ -695,10 +695,6 @@
> legend {
@apply text-base font-medium mb-3;
& + p {
@apply -mt-1.5;
}
}
}
.field {
@@ -718,10 +714,21 @@
section {
@apply flex flex-1 flex-col gap-1.5 leading-snug;
}
&[data-orientation='horizontal'] {
@apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
}
}
.fieldset legend + p,
.field p {
@apply text-muted-foreground text-sm leading-normal font-normal last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
.field > p,
.field section > p {
@apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
}
.fieldset legend + p {
@apply -mt-1.5;
}
.field > p {
@apply last:mt-0 nth-last-2:-mt-1;
}
}