mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 01:13:05 +00:00
change: update all current components with library comments
This commit is contained in:
“axzilla”
parent
4034004050
commit
846f0e87d7
@ -5,6 +5,7 @@
|
||||
- Added: Input component
|
||||
- Changed: Add button type prop
|
||||
- Changed: Use own input component on tabs example
|
||||
- Changed: Update all current components with library comments
|
||||
|
||||
## 2024-10-06
|
||||
|
||||
|
||||
@ -628,10 +628,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
@ -706,10 +702,6 @@ body {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.m-32 {
|
||||
margin: 8rem;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
@ -807,10 +799,6 @@ body {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
@ -859,10 +847,6 @@ body {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
@ -879,10 +863,6 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-1\/2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@ -899,12 +879,8 @@ body {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
@ -1035,18 +1011,18 @@ body {
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -1152,10 +1128,6 @@ body {
|
||||
background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
@ -1276,26 +1248,10 @@ body {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pl-10 {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.pr-10 {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.pr-3 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
@ -1344,10 +1300,6 @@ body {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-\[0\.8rem\] {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -1386,11 +1338,6 @@ body {
|
||||
color: hsl(var(--card-foreground) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-destructive {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--destructive) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-destructive-foreground {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
|
||||
@ -1535,14 +1482,6 @@ body {
|
||||
mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
.file\:mr-4::file-selector-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.file\:rounded-md::file-selector-button {
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
}
|
||||
|
||||
.file\:border-0::file-selector-button {
|
||||
border-width: 0px;
|
||||
}
|
||||
@ -1551,21 +1490,6 @@ body {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.file\:bg-secondary::file-selector-button {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.file\:px-4::file-selector-button {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.file\:py-2::file-selector-button {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.file\:text-sm::file-selector-button {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
@ -1575,11 +1499,6 @@ body {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file\:text-secondary-foreground::file-selector-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.file\:text-foreground::file-selector-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--foreground) / var(--tw-text-opacity));
|
||||
@ -1651,15 +1570,6 @@ body {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.hover\:file\:bg-secondary\/80::file-selector-button:hover {
|
||||
background-color: hsl(var(--secondary) / 0.8);
|
||||
}
|
||||
|
||||
.focus\:border-ring:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--ring) / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@ -1680,26 +1590,11 @@ body {
|
||||
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.focus\:ring-ring:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.focus\:ring-offset-2:focus {
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.focus-visible\:outline-none:focus-visible {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.focus-visible\:ring-1:focus-visible {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus-visible\:ring-2:focus-visible {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
|
||||
@ -1,39 +1,97 @@
|
||||
package components
|
||||
|
||||
// CardProps defines the properties for the Card component.
|
||||
type CardProps struct {
|
||||
// Class specifies additional CSS classes to apply to the card.
|
||||
// Default: "" (empty string)
|
||||
Class string
|
||||
|
||||
// Attributes allows passing additional HTML attributes to the card element.
|
||||
// Default: nil
|
||||
Attributes templ.Attributes
|
||||
}
|
||||
|
||||
// Card renders a card component based on the provided props.
|
||||
// It can be customized with additional classes and attributes.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.Card(components.CardProps{
|
||||
// Class: "custom-card",
|
||||
// Attributes: templ.Attributes{"data-testid": "my-card"},
|
||||
// }) {
|
||||
// // Card content goes here
|
||||
// }
|
||||
//
|
||||
// Props:
|
||||
// - Class: Additional CSS classes to apply to the card. Default: "" (empty string)
|
||||
// - Attributes: Additional HTML attributes to apply to the card element. Default: nil
|
||||
templ Card(props CardProps) {
|
||||
<div class={ "rounded-lg border bg-card text-card-foreground shadow-sm", props.Class }>
|
||||
<div class={ "rounded-lg border bg-card text-card-foreground shadow-sm", props.Class } { props.Attributes... }>
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
// CardHeader renders the header section of a card.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.CardHeader() {
|
||||
// @components.CardTitle() { Card Title }
|
||||
// @components.CardDescription() { Card description goes here }
|
||||
// }
|
||||
templ CardHeader() {
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
// CardTitle renders the title of a card.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.CardTitle() {
|
||||
// My Card Title
|
||||
// }
|
||||
templ CardTitle() {
|
||||
<h3 class="font-semibold leading-none tracking-tight">
|
||||
{ children... }
|
||||
</h3>
|
||||
}
|
||||
|
||||
// CardDescription renders the description of a card.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.CardDescription() {
|
||||
// This is a detailed description of the card's content.
|
||||
// }
|
||||
templ CardDescription() {
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{ children... }
|
||||
</p>
|
||||
}
|
||||
|
||||
// CardContent renders the main content section of a card.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.CardContent() {
|
||||
// // Main card content goes here
|
||||
// }
|
||||
templ CardContent() {
|
||||
<div class="p-6 pt-0">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
// CardFooter renders the footer section of a card.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.CardFooter() {
|
||||
// @components.Button(components.ButtonProps{Text: "Submit"})
|
||||
// }
|
||||
templ CardFooter() {
|
||||
<div class="flex items-center p-6 pt-0">
|
||||
{ children... }
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
package components
|
||||
|
||||
// SheetSide represents the side from which the sheet will appear.
|
||||
type SheetSide string
|
||||
|
||||
// Constants for sheet sides.
|
||||
const (
|
||||
Top SheetSide = "top"
|
||||
Right SheetSide = "right"
|
||||
@ -9,12 +11,28 @@ const (
|
||||
Left SheetSide = "left"
|
||||
)
|
||||
|
||||
// SheetProps defines the properties for the Sheet component.
|
||||
type SheetProps struct {
|
||||
Title string
|
||||
// Title is the heading text for the sheet.
|
||||
// Default: "" (empty string)
|
||||
Title string
|
||||
|
||||
// Description is the subheading or description text for the sheet.
|
||||
// Default: "" (empty string)
|
||||
Description string
|
||||
Side SheetSide
|
||||
|
||||
// Side determines from which side the sheet will appear.
|
||||
// Default: Right
|
||||
Side SheetSide
|
||||
}
|
||||
|
||||
// SheetRoot renders the root component for the Sheet, setting up the Alpine.js data and event handlers.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.SheetRoot() {
|
||||
// // Sheet trigger and content go here
|
||||
// }
|
||||
templ SheetRoot() {
|
||||
<div
|
||||
x-data="{
|
||||
@ -34,6 +52,22 @@ templ SheetRoot() {
|
||||
</div>
|
||||
}
|
||||
|
||||
// Sheet renders the main sheet component with backdrop and content.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.Sheet(components.SheetProps{
|
||||
// Title: "Sheet Title",
|
||||
// Description: "Sheet description goes here",
|
||||
// Side: components.Right,
|
||||
// }) {
|
||||
// // Sheet content goes here
|
||||
// }
|
||||
//
|
||||
// Props:
|
||||
// - Title: The heading text for the sheet. Default: "" (empty string)
|
||||
// - Description: The subheading or description text for the sheet. Default: "" (empty string)
|
||||
// - Side: Determines from which side the sheet will appear. Default: Right
|
||||
templ Sheet(props SheetProps) {
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
@ -102,6 +136,17 @@ templ Sheet(props SheetProps) {
|
||||
</div>
|
||||
}
|
||||
|
||||
// SheetTrigger renders a trigger element that opens the sheet when clicked.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.SheetTrigger("Open Sheet", components.Right) {
|
||||
// <button>Open Sheet</button>
|
||||
// }
|
||||
//
|
||||
// Props:
|
||||
// - text: The text content of the trigger (unused in the current implementation)
|
||||
// - side: The side from which the sheet should appear
|
||||
templ SheetTrigger(text string, side SheetSide) {
|
||||
<span
|
||||
@click={ "open('" + string(side) + "')" }
|
||||
@ -110,6 +155,14 @@ templ SheetTrigger(text string, side SheetSide) {
|
||||
</span>
|
||||
}
|
||||
|
||||
// SheetClose renders a button that closes the sheet when clicked.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.SheetClose("Close")
|
||||
//
|
||||
// Props:
|
||||
// - text: The text content of the close button
|
||||
templ SheetClose(text string) {
|
||||
<button
|
||||
@click="close()"
|
||||
|
||||
@ -1,17 +1,49 @@
|
||||
package components
|
||||
|
||||
// Tab represents a single tab in the Tabs component.
|
||||
type Tab struct {
|
||||
ID string
|
||||
Title string
|
||||
// ID is the unique identifier for the tab.
|
||||
ID string
|
||||
|
||||
// Title is the text displayed on the tab button.
|
||||
Title string
|
||||
|
||||
// Content is the templ.Component to be rendered when the tab is active.
|
||||
Content templ.Component
|
||||
}
|
||||
|
||||
// TabsProps defines the properties for the Tabs component.
|
||||
type TabsProps struct {
|
||||
Tabs []Tab
|
||||
TabsContainerClass string
|
||||
// Tabs is an array of Tab structs representing each tab in the component.
|
||||
Tabs []Tab
|
||||
|
||||
// TabsContainerClass specifies additional CSS classes for the tabs container.
|
||||
// Default: "" (empty string)
|
||||
TabsContainerClass string
|
||||
|
||||
// ContentContainerClass specifies additional CSS classes for the content container.
|
||||
// Default: "" (empty string)
|
||||
ContentContainerClass string
|
||||
}
|
||||
|
||||
// Tabs renders a tabbed interface component based on the provided props.
|
||||
// It uses Alpine.js for interactivity and state management.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// @components.Tabs(components.TabsProps{
|
||||
// Tabs: []components.Tab{
|
||||
// {ID: "1", Title: "Tab 1", Content: Tab1Content()},
|
||||
// {ID: "2", Title: "Tab 2", Content: Tab2Content()},
|
||||
// },
|
||||
// TabsContainerClass: "w-full max-w-md",
|
||||
// ContentContainerClass: "mt-4",
|
||||
// })
|
||||
//
|
||||
// Props:
|
||||
// - Tabs: An array of Tab structs, each representing a tab in the interface.
|
||||
// - TabsContainerClass: Additional CSS classes for the tabs container. Default: "" (empty string)
|
||||
// - ContentContainerClass: Additional CSS classes for the content container. Default: "" (empty string)
|
||||
templ Tabs(props TabsProps) {
|
||||
<div
|
||||
x-data="{
|
||||
@ -33,12 +65,14 @@ templ Tabs(props TabsProps) {
|
||||
x-init="$nextTick(() => tabRepositionMarker($refs.tabButtons.firstElementChild));"
|
||||
class="relative"
|
||||
>
|
||||
<!-- Tabs buttons container -->
|
||||
<div
|
||||
x-ref="tabButtons"
|
||||
class={ "relative flex items-center justify-center h-10 p-1 rounded-lg select-none",
|
||||
"bg-muted text-muted-foreground",
|
||||
props.TabsContainerClass }
|
||||
>
|
||||
<!-- Individual tab buttons -->
|
||||
for _, tab := range props.Tabs {
|
||||
<button
|
||||
:id="$id(tabId)"
|
||||
@ -50,11 +84,14 @@ templ Tabs(props TabsProps) {
|
||||
{ tab.Title }
|
||||
</button>
|
||||
}
|
||||
<!-- Active tab marker -->
|
||||
<div x-ref="tabMarker" class="absolute left-0 z-10 h-full duration-300 ease-out" x-cloak>
|
||||
<div class="w-full h-full bg-background rounded-md shadow-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab content container -->
|
||||
<div class={ "relative mt-2 content", props.ContentContainerClass }>
|
||||
<!-- Individual tab content -->
|
||||
for _, tab := range props.Tabs {
|
||||
<div
|
||||
:id="$id(tabId + '-content')"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user