Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-30 13:51:28 +04:00
Code Issues Projects Releases Wiki Activity

Move demo page titles, actions and docs links into the layout header (#2867)

Browse Source
This commit is contained in:
Paweł Kuna
2026-08-13 01:19:12 +02:00
committed by GitHub
parent cc298a6c46
commit 118ca4bd00
126 changed files with 331 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/card-title-heading-level.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fixed heading order by making `CardTitle` and `CardHeader` render `h2`, so cards no longer skip a level under the page `h1`.
.changeset/demo-page-titles-in-header.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": minor
---
Updated the demo pages to show their title and description in the page header, with `pageHeader` falling back to `title`.
.changeset/page-header-actions-slot.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": minor
---
Removed the `actions` preset prop from `DefaultLayout`; pages now fill a `page-header-actions` slot instead.
.changeset/preview-meta-description.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Added a `meta` description tag, filled from the page `description` prop.
preview/pages/2-step-verification-code.astro
+2 -1
View File
@@ -4,12 +4,13 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<SingleLayout title="2-Step Verification">
<form class="card card-md" action="./" method="get" novalidate>
<div class="card-body">
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
<CardTitle class="card-title-lg text-center mb-4">Authenticate Your Account</CardTitle>
<p class="my-4 text-center">
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
preview/pages/2-step-verification.astro
+2 -1
View File
@@ -6,12 +6,13 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import FormGroup from '@ui/FormGroup.astro'
import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
---
<SingleLayout title="2-Step Verification">
<form class="card card-md" action="./2-step-verification-code.html" method="get" novalidate>
<div class="card-body">
<h2 class="card-title text-center mb-4">2-Step Verification</h2>
<CardTitle class="text-center mb-4">2-Step Verification</CardTitle>
<FormGroup label="Country" for="verify-country">
<select class="form-select" id="verify-country" autocomplete="country-name">
preview/pages/accordion.astro
+2 -11
View File
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const accordionDocsUrl = getDocsUrl('/ui/components/accordion')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Accordion" pageMenu="base.accordion" description="Accordions show and hide sections of content, one panel at a time, inside a card.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Accordion</PageTitle>
<a href={accordionDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/accordion" />
<div class="row row-cards">
<div class="col-md-6">
preview/pages/activity.astro
+1 -1
View File
@@ -5,7 +5,7 @@ import CardBody from '@ui/CardBody.astro'
import ActivityPart from '@ui/ActivityPart.astro'
---
<DefaultLayout title="Activity" pageHeader="Activity" pageMenu="extra.activity">
<DefaultLayout title="Activity" pageMenu="extra.activity">
<div class="row">
<div class="col-8">
<Card>
preview/pages/alerts.astro
+8 -17
View File
@@ -5,26 +5,17 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const alertDocsUrl = getDocsUrl('/ui/components/alert')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Alerts" pageMenu="base.alerts" description="Alert messages inform users about the status of an action, in success, info, warning, or danger states.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Alerts</PageTitle>
<a href={alertDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/alert" />
<div class="row row-cards">
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">Basic</CardTitle>
<CardTitle>Basic</CardTitle>
<CardSubtitle>A title and a color are enough to show the status of an action.</CardSubtitle>
<Alert type="danger" title="An error occurred!" />
<Alert type="warning" title="Some information is missing!" />
@@ -36,7 +27,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">With action</CardTitle>
<CardTitle>With action</CardTitle>
<CardSubtitle>Add a link with the <code>action</code> prop to give users something to do next.</CardSubtitle>
<Alert showClose action="Link" type="danger" title="An error occurred!" />
<Alert showClose action="Link" type="warning" title="Some information is missing!" />
@@ -48,7 +39,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">Dismissible</CardTitle>
<CardTitle>Dismissible</CardTitle>
<CardSubtitle>Add <code>showClose</code> to let users close the alert.</CardSubtitle>
<Alert showClose type="danger" title="An error occurred!" />
<Alert showClose type="warning" title="Some information is missing!" />
@@ -60,7 +51,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">With a description</CardTitle>
<CardTitle>With a description</CardTitle>
<CardSubtitle>Add a <code>description</code> or a <code>list</code> when the title alone isn't enough context.</CardSubtitle>
<Alert showClose type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose type="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
@@ -72,7 +63,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">Important</CardTitle>
<CardTitle>Important</CardTitle>
<CardSubtitle>Add <code>important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
<Alert showClose important type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose important type="success" description="This is a custom alert box with a description." />
@@ -84,7 +75,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">Minor</CardTitle>
<CardTitle>Minor</CardTitle>
<CardSubtitle>Add <code>minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
<Alert showClose minor type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose minor type="success" description="This is a custom alert box with a description." />
preview/pages/avatars.astro
+14 -22
View File
@@ -7,11 +7,10 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import people from '@data/people.json'
import { site } from '@shared/lib/site'
import { firstLetters, getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import { firstLetters } from '@shared/lib/string-format'
import DocsLink from '@ui/DocsLink.astro'
const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost']
@@ -25,23 +24,16 @@ const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const
const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary']
const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
---
<DefaultLayout title="Avatars" pageMenu="base.avatars" description="Avatars display a photo, icon, or initials to represent a person, brand, or status.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Avatars</PageTitle>
<a href={avatarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/avatar" />
<div class="row row-cards">
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Default avatar</CardTitle>
<CardTitle>Default avatar</CardTitle>
<CardSubtitle>The base <code>.avatar</code> element — a placeholder box for a photo, icon, or initials.</CardSubtitle>
<Avatar />
</CardBody>
@@ -50,7 +42,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar with icon</CardTitle>
<CardTitle>Avatar with icon</CardTitle>
<CardSubtitle>Use an icon instead of a photo with the <code>icon</code> prop.</CardSubtitle>
<div class="avatar-list">
{iconIcons.map((icon) => <Avatar icon={icon} />)}
@@ -61,7 +53,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar icon colors</CardTitle>
<CardTitle>Avatar icon colors</CardTitle>
<CardSubtitle>Combine an icon avatar with any theme color.</CardSubtitle>
<div class="avatar-list">
{colors.map((color) => <Avatar icon="user" color={color} />)}
@@ -72,7 +64,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Simple avatar</CardTitle>
<CardTitle>Simple avatar</CardTitle>
<CardSubtitle>Pass a <code>person</code> object to render their photo.</CardSubtitle>
<div class="avatar-list">
{people8.map((person) => <Avatar person={person} />)}
@@ -83,7 +75,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar placeholder</CardTitle>
<CardTitle>Avatar placeholder</CardTitle>
<CardSubtitle>Fall back to initials with the <code>placeholder</code> prop when there's no photo.</CardSubtitle>
<div class="avatar-list">
{people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
@@ -94,7 +86,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar shapes</CardTitle>
<CardTitle>Avatar shapes</CardTitle>
<CardSubtitle>Square by default — add <code>.rounded-circle</code> or <code>.rounded-0</code> to change the shape.</CardSubtitle>
<div class="avatar-list">
<Avatar />
@@ -107,7 +99,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-12 col-lg-6">
<Card>
<CardBody>
<CardTitle as="h2">Avatar sizes</CardTitle>
<CardTitle>Avatar sizes</CardTitle>
<CardSubtitle>Six sizes from <code>xxs</code> to <code>xl</code>, for both photos and placeholders.</CardSubtitle>
<div class="row">
<div class="col-6">
@@ -127,7 +119,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-12 col-lg-6">
<Card>
<CardBody>
<CardTitle as="h2">Avatar lists</CardTitle>
<CardTitle>Avatar lists</CardTitle>
<CardSubtitle>Stack avatars with <code>&lt;AvatarList&gt;</code> to show a group at a glance.</CardSubtitle>
<div class="row g-3">
{
@@ -159,7 +151,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar upload</CardTitle>
<CardTitle>Avatar upload</CardTitle>
<CardSubtitle>An upload control styled as an avatar, for profile photo pickers.</CardSubtitle>
{uploadSizes.map((size) => <AvatarUpload size={size} />)}
</CardBody>
@@ -168,7 +160,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar statuses</CardTitle>
<CardTitle>Avatar statuses</CardTitle>
<CardSubtitle>Add a <code>status</code> dot to show online, away, or busy state.</CardSubtitle>
{statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
</CardBody>
@@ -177,7 +169,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
<div class="col-sm-6 col-lg-4">
<Card>
<CardBody>
<CardTitle as="h2">Avatar brands</CardTitle>
<CardTitle>Avatar brands</CardTitle>
<CardSubtitle>Show a recognizable brand icon instead of a person.</CardSubtitle>
{brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
</CardBody>
preview/pages/badges.astro
+3 -10
View File
@@ -11,22 +11,15 @@ import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import DropdownMenu from '@ui/DropdownMenu.astro'
import site from '@data/site.json'
import { ucFirst, getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import { ucFirst } from '@shared/lib/string-format'
import DocsLink from '@ui/DocsLink.astro'
const colors = ['default', ...Object.keys(site.colors), 'dark', 'light']
const sizes = ['sm', 'md', 'lg']
const badgeDocsUrl = getDocsUrl('/ui/components/badge')
---
<DefaultLayout title="Badges" pageMenu="base.badges" description="Badges highlight a count, status, or short label attached to text, buttons, or menu items.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Badges</PageTitle>
<a href={badgeDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/badge" />
<div class="row row-cards mb-5">
<div class="col-md-6 col-lg-4">
preview/pages/blank.astro
+1 -1
View File
@@ -4,7 +4,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Empty from '@ui/Empty.astro'
---
<DefaultLayout title="Blank page" pageMenu="base.blank" containerCentered>
<DefaultLayout title="Blank page" pageHeader={false} pageMenu="base.blank" containerCentered>
<h1 class="visually-hidden">Blank page</h1>
<Empty buttonText="Add your first client" buttonIcon="plus" illustration="computer-fix.svg" />
</DefaultLayout>
preview/pages/buttons.astro
+2 -10
View File
@@ -8,8 +8,7 @@ import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import site from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
type ColorEntry = [string, { title: string; icon?: string }]
@@ -21,17 +20,10 @@ const socialColors = Object.entries(site.socialColors) as ColorEntry[]
const actions = ['edit', 'copy', 'settings', 'clipboard', 'x']
const sizes = ['sm', 'md', 'lg', 'xl'] as const
const buttonDocsUrl = getDocsUrl('/ui/components/button')
---
<DefaultLayout title="Buttons" pageMenu="base.buttons" description="Buttons are used to trigger actions in a user interface.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Buttons</PageTitle>
<a href={buttonDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/button" />
<div class="row row-cards mb-5">
<div class="col-md-6 col-lg-4">
preview/pages/card-actions.astro
+3 -3
View File
@@ -16,7 +16,7 @@ const person0 = requireIndex(people, 0)
const person3 = requireIndex(people, 3)
---
<DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
<DefaultLayout title="Card actions" pageMenu="base.cards.actions">
<div class="row row-cards">
<div class="col-md-6">
<Card>
@@ -57,7 +57,7 @@ const person3 = requireIndex(people, 3)
<Avatar person={person0} />
</div>
<div class="col">
<h3 class="card-title">{person0.full_name}</h3>
<CardTitle>{person0.full_name}</CardTitle>
<CardSubtitle as="div">{person0.job_title}</CardSubtitle>
</div>
</div>
@@ -107,7 +107,7 @@ const person3 = requireIndex(people, 3)
<Avatar person={person3} />
</div>
<div class="col">
<h3 class="card-title">{person3.full_name}</h3>
<CardTitle>{person3.full_name}</CardTitle>
<CardSubtitle as="div">{person3.job_title}</CardSubtitle>
</div>
</div>
preview/pages/card-gradients.astro
+1 -1
View File
@@ -14,7 +14,7 @@ import people from '@data/people.json'
import { requireIndex } from '@shared/lib/array'
---
<DefaultLayout title="Card Gradients" pageHeader="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
<DefaultLayout title="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
<div class="row row-cards">
<div class="col-md-6">
<div class="row row-cards">
preview/pages/cards-masonry.astro
+1 -1
View File
@@ -9,7 +9,7 @@ import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro'
const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300, 200]
---
<DefaultLayout title="Cards Masonry" pageHeader="Cards Masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
<DefaultLayout title="Cards Masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
<div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
{
heights.map((height) => (
preview/pages/cards.astro
+1 -1
View File
@@ -17,7 +17,7 @@ const cardsStack = ['First', 'Second', 'Third']
const cardsStackColors = ['red', 'green', 'blue']
---
<DefaultLayout title="Cards" pageHeader="Cards" pageMenu="base.cards.base">
<DefaultLayout title="Cards" pageMenu="base.cards.base">
<div class="row row-cards">
<div class="col-md-6 col-lg-3">
<div class="card">
preview/pages/carousel.astro
+2 -11
View File
@@ -1,20 +1,11 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CarouselCard from '@shared/components/cards/CarouselCard.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const carouselDocsUrl = getDocsUrl('/ui/components/carousel')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Carousel" pageMenu="base.carousel" description="A carousel cycles through a set of slides, with optional indicators and controls.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Carousel</PageTitle>
<a href={carouselDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/carousel" />
<div class="row row-cards">
<div class="col-md-6">
preview/pages/changelog.astro
+1 -1
View File
@@ -6,6 +6,6 @@ import changelog from '../../core/CHANGELOG.md?raw'
const changelogHtml = renderMarkdown(changelog)
---
<ProseLayout title="Changelog" pageHeader="Changelog" pageMenu="changelog">
<ProseLayout title="Changelog" pageMenu="changelog">
<Fragment set:html={changelogHtml} />
</ProseLayout>
preview/pages/charts.astro
+1 -1
View File
@@ -12,7 +12,7 @@ import { capitalize } from '@shared/lib/string-format'
const demoCharts = Object.entries(chartsData as Record<string, { demo?: boolean; name?: string }>).filter(([, chart]) => chart && chart.demo)
---
<DefaultLayout title="Charts" pageHeader="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
<DefaultLayout title="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
<div class="row row-cards">
<div class="col-lg-12">
<Activity />
preview/pages/chat.astro
+1 -1
View File
@@ -22,7 +22,7 @@ const sidebarPeople = (people as Person[]).slice(0, 10)
const messages = chats as Message[]
---
<DefaultLayout title="Chat" pageHeader="Chat" pageMenu="extra.chat" containerClass="flex-fill d-flex flex-column">
<DefaultLayout title="Chat" pageMenu="extra.chat" containerClass="flex-fill d-flex flex-column">
<div class="card flex-fill">
<div class="row g-0 flex-fill">
<div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
preview/pages/colorpicker.astro
+1 -1
View File
@@ -9,7 +9,7 @@ import site from '@data/site.json'
const colors = Object.values(site.colors) as { hex: string; title: string }[]
---
<DefaultLayout title="Color picker" pageHeader="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
<DefaultLayout title="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
<Card>
<CardBody>
<CardTitle>Basic</CardTitle>
preview/pages/colors.astro
+2 -11
View File
@@ -7,10 +7,8 @@ import CardBody from '@ui/CardBody.astro'
import Avatar from '@ui/Avatar.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import site from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }]
@@ -20,17 +18,10 @@ const grayColors = Object.entries(site.grayColors) as ColorEntry[]
const socialColors = Object.entries(site.socialColors) as ColorEntry[]
const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent']
const colorsDocsUrl = getDocsUrl('/ui/base/colors')
---
<DefaultLayout title="Colors" pageMenu="base.colors" description="The full color palette, with hex values, and a gradient builder.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Colors</PageTitle>
<a href={colorsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/base/colors" />
<div class="row row-cards">
<div class="col-6 col-lg-3">
preview/pages/cookie-banner.astro
+1 -1
View File
@@ -4,7 +4,7 @@ import Offcanvas from '@ui/Offcanvas.astro'
import OffcanvasBody from '@ui/OffcanvasBody.astro'
---
<DefaultLayout title="Cookie banner" pageHeader="Cookie banner" pageMenu="extra.cookie-banner">
<DefaultLayout title="Cookie banner" pageMenu="extra.cookie-banner">
<Offcanvas direction="bottom" show class="h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
<OffcanvasBody>
<div class="container">
preview/pages/dashboard-crm.astro
+1 -1
View File
@@ -10,7 +10,7 @@ import TeamLeaderboard from '@shared/components/cards/TeamLeaderboard.astro'
import ChurnRisk from '@shared/components/cards/ChurnRisk.astro'
---
<DefaultLayout title="CRM Dashboard" pageHeader="CRM Dashboard" description="Welcome back — here's your CRM overview for today." pageMenu="dashboards.crm" pageLibs={['apexcharts']}>
<DefaultLayout title="CRM Dashboard" description="Welcome back — here's your CRM overview for today." pageMenu="dashboards.crm" pageLibs={['apexcharts']}>
<div>
<div class="col-12">
<div class="row row-cards">
preview/pages/dashboard-crypto.astro
+12 -11
View File
@@ -14,6 +14,7 @@ import cryptoCurrencies from '@data/crypto-currencies.json'
import cryptoMarkets from '@data/crypto-markets.json'
import cryptoOrders from '@data/crypto-orders.json'
import { parseCurrency, roundTo } from '@shared/lib/string-format'
import CardTitle from '@ui/CardTitle.astro'
interface Currency {
'symbol': string
@@ -43,7 +44,7 @@ const orders = cryptoOrders as { sell_orders: { price: string; btc: string; sum:
const operationCurrencies = currencies.slice(0, 20)
---
<DefaultLayout title="Crypto Dashboard" pageHeader="Crypto Dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
<DefaultLayout title="Crypto Dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
<div class="row row-cards">
<div class="col-12">
<div class="row row-cards">
@@ -52,7 +53,7 @@ const operationCurrencies = currencies.slice(0, 20)
<CardBody>
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Total balance</h5>
<CardTitle>Total balance</CardTitle>
</div>
<div class="col-auto">
<Avatar icon="currency-dollar" />
@@ -75,7 +76,7 @@ const operationCurrencies = currencies.slice(0, 20)
<CardBody>
<div class="row">
<div class="col mt-0">
<h5 class="card-title">USD/BTC</h5>
<CardTitle>USD/BTC</CardTitle>
</div>
<div class="col-auto">
<Avatar icon="currency-bitcoin" />
@@ -97,7 +98,7 @@ const operationCurrencies = currencies.slice(0, 20)
<CardBody>
<div class="row">
<div class="col mt-0">
<h5 class="card-title">LTC/BTC</h5>
<CardTitle>LTC/BTC</CardTitle>
</div>
<div class="col-auto">
<Avatar icon="currency-litecoin" />
@@ -119,7 +120,7 @@ const operationCurrencies = currencies.slice(0, 20)
<CardBody>
<div class="row">
<div class="col mt-0">
<h5 class="card-title">ETH/BTC</h5>
<CardTitle>ETH/BTC</CardTitle>
</div>
<div class="col-auto">
<Avatar icon="currency-ethereum" />
@@ -141,7 +142,7 @@ const operationCurrencies = currencies.slice(0, 20)
<CardBody>
<div class="row">
<div class="col mt-0">
<h5 class="card-title">XMR/BTC</h5>
<CardTitle>XMR/BTC</CardTitle>
</div>
<div class="col-auto">
<Avatar icon="currency-monero" />
@@ -164,7 +165,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-5">
<Card>
<CardHeader>
<h5 class="card-title mb-0">Markets</h5>
<CardTitle class="mb-0">Markets</CardTitle>
<CardActions>
<CardDropdown />
</CardActions>
@@ -205,7 +206,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-7">
<Card>
<CardHeader>
<h5 class="card-title mb-0">LTC/BTC</h5>
<CardTitle class="mb-0">LTC/BTC</CardTitle>
<CardActions>
<NavSegmented items={['1m', '5m', '30m', '1h', '1d']} name="timeframe" size="sm" default={2} />
</CardActions>
@@ -222,7 +223,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-12 col-xxl-3">
<Card>
<CardHeader>
<h5 class="card-title mb-0">Operations</h5>
<CardTitle class="mb-0">Operations</CardTitle>
<CardActions>
<NavSegmented items={['Buy', 'Sell', 'Send']} name="operations" size="sm" />
</CardActions>
@@ -269,7 +270,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-6 col-xxl">
<Card>
<CardHeader>
<h5 class="card-title mb-0">Sell Orders</h5>
<CardTitle class="mb-0">Sell Orders</CardTitle>
<CardActions>
<button class="btn btn-sm">View all</button>
</CardActions>
@@ -300,7 +301,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-6 col-xxl">
<Card>
<CardHeader>
<h5 class="card-title mb-0">Buy Orders</h5>
<CardTitle class="mb-0">Buy Orders</CardTitle>
<CardActions>
<button class="btn btn-sm">View all</button>
</CardActions>
preview/pages/datagrid.astro
+2 -11
View File
@@ -3,21 +3,12 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Datagrid from '@shared/components/parts/Datagrid.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const datagridDocsUrl = getDocsUrl('/ui/components/datagrid')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Data grid" pageMenu="base.datagrid" description="A data grid lays out label/value pairs in a compact, aligned grid.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Data grid</PageTitle>
<a href={datagridDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/datagrid" />
<Card>
<CardHeader title="Base info" />
preview/pages/datatables.astro
+1 -1
View File
@@ -33,7 +33,7 @@ const rows = (rollercoasters as Rollercoaster[]).map((rc, i) => {
const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity']
---
<DefaultLayout title="Datatables" pageHeader="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
<DefaultLayout title="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
<Card>
<CardBody class="p-0">
<div id={`table-${id}`} class="table-responsive">
preview/pages/dropdowns.astro
+2 -11
View File
@@ -2,20 +2,11 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import DropdownMenu from '@ui/DropdownMenu.astro'
import DropdownMenuAll from '@ui/DropdownMenuAll.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const dropdownDocsUrl = getDocsUrl('/ui/components/dropdown')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Dropdowns" pageMenu="base.dropdowns" description="Dropdown menus for actions, filters, and selections, always shown open here for reference.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Dropdowns</PageTitle>
<a href={dropdownDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/dropdown" />
<div class="row">
<div class="col-sm-6 col-lg-3">
preview/pages/dropzone.astro
+1 -1
View File
@@ -6,7 +6,7 @@ import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<DefaultLayout title="Dropzone" pageHeader="Dropzone" pageMenu="plugins.dropzone" pageLibs={['dropzone']}>
<DefaultLayout title="Dropzone" pageMenu="plugins.dropzone" pageLibs={['dropzone']}>
<div class="row row-cards">
<div class="col-md-6">
<Card>
preview/pages/empty.astro
+1 -1
View File
@@ -2,6 +2,6 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
---
<DefaultLayout title="Empty page" pageHeader="Empty page" pageMenu="extra.empty">
<DefaultLayout title="Empty page" pageMenu="extra.empty">
<!-- Content here -->
</DefaultLayout>
preview/pages/faq.astro
+3 -1
View File
@@ -2,11 +2,13 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import faq from '@data/faq.json'
import HeaderActionsBreadcrumb from '@shared/components/layout/HeaderActionsBreadcrumb.astro'
const categories = faq as { name: string; questions: { question: string }[] }[]
---
<DefaultLayout title="Frequently Asked Questions" pageHeader="Frequently Asked Questions" actions="breadcrumb" pageMenu="extra.faq">
<DefaultLayout title="Frequently Asked Questions" pageMenu="extra.faq">
<HeaderActionsBreadcrumb slot="page-header-actions" />
<div class="card card-lg">
<div class="card-body">
<div class="space-y-4">
preview/pages/flags.astro
+3 -2
View File
@@ -4,15 +4,16 @@ import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
// 21 filler divs for flexbox layout.
const fillers = Array.from({ length: 21 })
---
<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
<DefaultLayout title="Flags" pageMenu="addons.flags">
<Card>
<CardHeader>
<h3 class="card-title">List of all flags</h3>
<CardTitle>List of all flags</CardTitle>
</CardHeader>
<CardBody class="p-0">
<div class="demo-icons-list-wrap">
preview/pages/form-elements.astro
+2 -2
View File
@@ -50,12 +50,12 @@ const rows = [
]
---
<DefaultLayout title="Form elements" pageHeader="Form elements" pageMenu="form.elements" pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}>
<DefaultLayout title="Form elements" pageMenu="form.elements" pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}>
<div class="row row-cards">
<div class="col-12">
<Card as="form" action="https://httpbin.org/post" method="post">
<CardHeader>
<h4 class="card-title">Form elements</h4>
<CardTitle>Form elements</CardTitle>
</CardHeader>
<CardBody>
<div class="row g-5">
preview/pages/fullcalendar.astro
+1 -1
View File
@@ -5,7 +5,7 @@ import CardBody from '@ui/CardBody.astro'
import Fullcalendar from '@ui/Fullcalendar.astro'
---
<DefaultLayout title="Fullcalendar" pageHeader="Fullcalendar" pageMenu="plugins.fullcalendar" pageLibs={['fullcalendar']}>
<DefaultLayout title="Fullcalendar" pageMenu="plugins.fullcalendar" pageLibs={['fullcalendar']}>
<Card>
<CardBody>
<Fullcalendar sampleEvents />
preview/pages/gallery.astro
+3 -1
View File
@@ -5,12 +5,14 @@ import Pagination from '@ui/Pagination.astro'
import photos from '@data/photos.json'
import people from '@data/people.json'
import { requireIndex } from '@shared/lib/array'
import HeaderActionsPhotos from '@shared/components/layout/HeaderActionsPhotos.astro'
// Horizontal photos, limit 15; person = people[loop index].
const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
---
<DefaultLayout title="Gallery" pageHeader="Gallery" description="1-15 of 241 photos" actions="photos" pageMenu="extra.gallery">
<DefaultLayout title="Gallery" description="1-15 of 241 photos" pageMenu="extra.gallery">
<HeaderActionsPhotos slot="page-header-actions" />
<div class="row row-cards">
{
galleryPhotos.map((photo, index) => (
preview/pages/icons.astro
+1 -1
View File
@@ -4,7 +4,7 @@ import IconsBanner from '@shared/components/cards/IconsBanner.astro'
import Icons from '@shared/components/cards/Icons.astro'
---
<DefaultLayout title="Icons" pageHeader="Icons" pageMenu="addons.icons">
<DefaultLayout title="Icons" pageMenu="addons.icons">
<div class="row row-cards">
<div class="col-lg-4">
<IconsBanner />
preview/pages/illustrations.astro
+1 -1
View File
@@ -33,7 +33,7 @@ const moreCount = illustrationsList.length - 4
const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => [key, { svg: withClass(svg) }]))
---
<DefaultLayout title="SVG Illustrations" pageHeader="SVG Illustrations" pageMenu="addons.illustrations">
<DefaultLayout title="SVG Illustrations" pageMenu="addons.illustrations">
<div class="mb-7" style={`--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: ${skinFirst.hex};`} id="current-illustration-style">
<div class="row row-cards">
<div class="col-12">
preview/pages/index.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Dashboard" pretitle="Overview" actions="buttons" pageMenu="dashboards.default" pageLibs={['apexcharts', 'jsvectormap']}>
<DefaultLayout title="Dashboard" pretitle="Overview" pageMenu="dashboards.default" pageLibs={['apexcharts', 'jsvectormap']}>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/inline-player.astro
+1 -1
View File
@@ -10,7 +10,7 @@ import players from '@data/inline-players.json'
type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number }
---
<DefaultLayout title="Inline Player" pageHeader="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
<DefaultLayout title="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
<div class="row row-cards">
{
(players as Provider[]).map((provider) => (
preview/pages/invoice.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import InvoiceCard from '@shared/components/cards/InvoiceCard.astro'
import HeaderActionsPrint from '@shared/components/layout/HeaderActionsPrint.astro'
---
<DefaultLayout title="Invoice" pageHeader="Invoice" pageMenu="extra.invoice" actions="print">
<DefaultLayout title="Invoice" pageMenu="extra.invoice">
<HeaderActionsPrint slot="page-header-actions" />
<InvoiceCard />
</DefaultLayout>
preview/pages/job-listing.astro
+3 -1
View File
@@ -6,6 +6,7 @@ import Avatar from '@ui/Avatar.astro'
import BadgeList from '@ui/BadgeList.astro'
import Check from '@ui/form/Check.astro'
import jobsData from '@data/jobs.json'
import HeaderActionsAddJob from '@shared/components/layout/HeaderActionsAddJob.astro'
interface Job {
company: string
@@ -23,7 +24,8 @@ const types = ['Programming', 'Design', 'Management / Finance', 'Customer Suppor
const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
---
<DefaultLayout title="Search for Jobs" pageHeader="Search for Jobs" actions="add-job" pageMenu="extra.job-listing">
<DefaultLayout title="Search for Jobs" pageMenu="extra.job-listing">
<HeaderActionsAddJob slot="page-header-actions" />
<div class="row g-4">
<div class="col-md-3">
<form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
preview/pages/layout-boxed.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Boxed layout" pretitle="Overview" actions="buttons" pageMenu="layout.boxed" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-boxed">
<DefaultLayout title="Dashboard" pageHeader="Boxed layout" pretitle="Overview" pageMenu="layout.boxed" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-boxed">
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-combo.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Combo layout" pretitle="Overview" actions="buttons" pageMenu="layout.combo" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarDark navbarHideBrand navbarClass="d-none d-lg-flex" navbarCondensed>
<DefaultLayout title="Dashboard" pageHeader="Combo layout" pretitle="Overview" pageMenu="layout.combo" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarDark navbarHideBrand navbarClass="d-none d-lg-flex" navbarCondensed>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-condensed.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Condensed layout" pretitle="Overview" actions="buttons" pageMenu="layout.condensed" pageLibs={['apexcharts', 'jsvectormap']} navbarCondensed>
<DefaultLayout title="Dashboard" pageHeader="Condensed layout" pretitle="Overview" pageMenu="layout.condensed" pageLibs={['apexcharts', 'jsvectormap']} navbarCondensed>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-fluid-vertical.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Fluid vertical layout" pretitle="Overview" actions="buttons" pageMenu="layout.fluid-vertical" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid" sidebar sidebarDark hideTopbar>
<DefaultLayout title="Dashboard" pageHeader="Fluid vertical layout" pretitle="Overview" pageMenu="layout.fluid-vertical" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid" sidebar sidebarDark hideTopbar>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-fluid.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Fluid layout" pretitle="Overview" actions="buttons" pageMenu="layout.fluid" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid">
<DefaultLayout title="Dashboard" pageHeader="Fluid layout" pretitle="Overview" pageMenu="layout.fluid" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid">
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-horizontal.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Horizontal layout" pretitle="Overview" actions="buttons" pageMenu="layout.horizontal" pageLibs={['apexcharts', 'jsvectormap']}>
<DefaultLayout title="Dashboard" pageHeader="Horizontal layout" pretitle="Overview" pageMenu="layout.horizontal" pageLibs={['apexcharts', 'jsvectormap']}>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-navbar-dark.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Navbar dark" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-dark" pageLibs={['apexcharts', 'jsvectormap']} navbarDark>
<DefaultLayout title="Dashboard" pageHeader="Navbar dark" pretitle="Overview" pageMenu="layout.navbar-dark" pageLibs={['apexcharts', 'jsvectormap']} navbarDark>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-navbar-overlap.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Navbar overlap layout" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-overlap" pageLibs={['apexcharts', 'jsvectormap']} navbarOverlap navbarCondensed navbarDark>
<DefaultLayout title="Dashboard" pageHeader="Navbar overlap layout" pretitle="Overview" pageMenu="layout.navbar-overlap" pageLibs={['apexcharts', 'jsvectormap']} navbarOverlap navbarCondensed navbarDark>
<HeaderActionsButtons slot="page-header-actions" dark />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-navbar-sticky.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Navbar sticky" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-sticky" pageLibs={['apexcharts', 'jsvectormap']} navbarSticky>
<DefaultLayout title="Dashboard" pageHeader="Navbar sticky" pretitle="Overview" pageMenu="layout.navbar-sticky" pageLibs={['apexcharts', 'jsvectormap']} navbarSticky>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-rtl.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="RTL mode" pageHeader="RTL mode" pretitle="Overview" actions="buttons" pageMenu="home" pageLibs={['apexcharts', 'jsvectormap']} rtl>
<DefaultLayout title="RTL mode" pretitle="Overview" pageMenu="home" pageLibs={['apexcharts', 'jsvectormap']} rtl>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent rtl />
</DefaultLayout>
preview/pages/layout-vertical-right.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" actions="buttons" pageMenu="layout.vertical-end" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" pageMenu="layout.vertical-end" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-vertical-transparent.astro
+3 -1
View File
@@ -1,8 +1,10 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Vertical transparent layout" pretitle="Overview" actions="buttons" pageMenu="layout.vertical-transparent" pageLibs={['apexcharts', 'jsvectormap']} sidebar navbarTransparent hideTopbar>
<DefaultLayout title="Dashboard" pageHeader="Vertical transparent layout" pretitle="Overview" pageMenu="layout.vertical-transparent" pageLibs={['apexcharts', 'jsvectormap']} sidebar navbarTransparent hideTopbar>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/layout-vertical.astro
+3 -1
View File
@@ -3,8 +3,10 @@
// layout: homepage (page-header overridden by the page front matter)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import HomepageContent from '@shared/components/HomepageContent.astro'
import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
---
<DefaultLayout title="Dashboard" pageHeader="Vertical layout" pretitle="Overview" actions="buttons" pageLibs={['apexcharts', 'jsvectormap']} pageMenu="layout.vertical" sidebar sidebarDark hideTopbar>
<DefaultLayout title="Dashboard" pageHeader="Vertical layout" pretitle="Overview" pageLibs={['apexcharts', 'jsvectormap']} pageMenu="layout.vertical" sidebar sidebarDark hideTopbar>
<HeaderActionsButtons slot="page-header-actions" />
<HomepageContent />
</DefaultLayout>
preview/pages/lightbox.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import photos from '@data/photos.json'
const filteredPhotos = photos.filter((photo) => photo.horizontal)
---
<DefaultLayout title="Lightbox" pageHeader="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']}>
<DefaultLayout title="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']}>
<div class="row row-cols-3 row-cols-md-4 row-cols-lg-6 g-3">
{
filteredPhotos.map((photo) => (
preview/pages/lists.astro
+2 -11
View File
@@ -2,25 +2,16 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import Icon from '@ui/Icon.astro'
import UsersList from '@shared/components/cards/UsersList.astro'
import UsersList2 from '@shared/components/cards/UsersList2.astro'
import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const listGroupDocsUrl = getDocsUrl('/ui/components/list-group')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Lists" pageMenu="base.lists" description="Lists of users, contacts, and links — built from list-group items or a plain card body.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Lists</PageTitle>
<a href={listGroupDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/list-group" />
<div class="row row-cards">
<div class="col-md-6">
preview/pages/logs.astro
+1 -1
View File
@@ -8,7 +8,7 @@ import CardFooter from '@ui/CardFooter.astro'
import { site } from '@shared/lib/site'
---
<DefaultLayout title="Logs" pageHeader="Logs" pageMenu="extra.logs">
<DefaultLayout title="Logs" pageMenu="extra.logs">
<div class="row">
<div class="col-lg-6">
<Card>
preview/pages/map-fullsize.astro
+1 -1
View File
@@ -3,7 +3,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
---
<DefaultLayout title="Full Size Map" pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} sidebar hideTopbar wrapperFull>
<DefaultLayout title="Full Size Map" pageHeader={false} pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} sidebar hideTopbar wrapperFull>
<h1 class="visually-hidden">Full Size Map</h1>
<div class="map flex-fill" id="map-google"></div>
<!--
preview/pages/maps-vector.astro
+1 -1
View File
@@ -6,7 +6,7 @@ import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<DefaultLayout title="Vector Maps" pageHeader="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
<DefaultLayout title="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
<div class="row row-cards">
<div class="col-md-6">
<Card>
preview/pages/maps.astro
+3 -2
View File
@@ -5,12 +5,13 @@ import Map from '@ui/Map.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import maps from '@data/maps.json'
import CardTitle from '@ui/CardTitle.astro'
type MapData = { title?: string; card?: boolean }
const mapEntries = Object.entries(maps as Record<string, MapData>)
---
<DefaultLayout title="Maps" pageHeader="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']}>
<DefaultLayout title="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']}>
<div class="row row-cards">
{
mapEntries.map(([mapId, data]) =>
@@ -24,7 +25,7 @@ const mapEntries = Object.entries(maps as Record<string, MapData>)
<div class="col-lg-6">
<Card>
<CardBody>
<h3 class="card-title">{data.title}</h3>
<CardTitle>{data.title}</CardTitle>
<Map mapId={mapId} />
</CardBody>
</Card>
preview/pages/modals.astro
+2 -11
View File
@@ -4,7 +4,6 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import ModalInline from '@shared/components/modals/ModalInline.astro'
import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro'
import LargeModalContent from '@shared/components/modals/LargeModalContent.astro'
@@ -23,21 +22,13 @@ import EditProfileModalContent from '@shared/components/modals/EditProfileModalC
import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro'
import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro'
import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0'
const modalDocsUrl = getDocsUrl('/ui/components/modal')
---
<DefaultLayout title="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'litepicker', 'tom-select']} description="Modals interrupt the page to ask for input, confirmation, or a focused action.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Modals</PageTitle>
<a href={modalDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/modal" />
<Card>
<CardBody>
preview/pages/music.astro
+1 -1
View File
@@ -6,7 +6,7 @@ import TrackInfo from '@shared/components/cards/music/TrackInfo.astro'
const topTrackIds = [8, 9, 10, 11, 12, 13]
---
<DefaultLayout title="Music components" pageHeader="Music components" pageMenu="extra.music">
<DefaultLayout title="Music components" pageMenu="extra.music">
<div class="row">
<div class="col-lg-8">
<TracksList />
preview/pages/navigation.astro
+2 -11
View File
@@ -4,20 +4,11 @@
// fluid-search (variant 5) is a no-op — search block in condensed branch is dead code.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Navbar from '@shared/components/navbar/Navbar.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const navbarDocsUrl = getDocsUrl('/ui/layout/navbars')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Navigation" pageMenu="base.navigation" description="Navbar variants — condensed, dark, colored, and with different logo and search layouts.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Navigation</PageTitle>
<a href={navbarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/layout/navbars" />
<div class="box">
<div class="mb-3">
preview/pages/offcanvas.astro
+3 -11
View File
@@ -1,27 +1,19 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { ucFirst as capitalize, getDocsUrl } from '@shared/lib/string-format'
import { ucFirst as capitalize } from '@shared/lib/string-format'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Offcanvas from '@ui/Offcanvas.astro'
import OffcanvasHeader from '@ui/OffcanvasHeader.astro'
import OffcanvasBody from '@ui/OffcanvasBody.astro'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
const directions = ['start', 'end', 'top', 'bottom'] as const
const offcanvasDocsUrl = getDocsUrl('/ui/components/offcanvas')
---
<DefaultLayout title="Offcanvas" pageMenu="base.offcanvas" description="An offcanvas panel slides in from an edge of the screen for navigation or supplementary content.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Offcanvas</PageTitle>
<a href={offcanvasDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/offcanvas" />
<Card>
<CardBody>
preview/pages/pagination.astro
+2 -11
View File
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const paginationDocsUrl = getDocsUrl('/ui/components/pagination')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Pagination" pageMenu="base.pagination" description="Pagination splits a long list of results into pages, with Prev/Next controls.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Pagination</PageTitle>
<a href={paginationDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/pagination" />
<div class="row row-cards">
<div class="col-12">
preview/pages/patterns.astro
+2 -11
View File
@@ -3,27 +3,18 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import BackgroundPattern from '@ui/BackgroundPattern.astro'
import site from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
const patternColors = Object.keys(site.colors)
const patternSizes = ['sm', 'md', 'lg', 'xl'] as const
const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const
const patternsDocsUrl = getDocsUrl('/ui/utilities/background-patterns')
---
<DefaultLayout title="Patterns" pageMenu="base.patterns" description="Background patterns you can apply to any element with a utility class.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Patterns</PageTitle>
<a href={patternsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/utilities/background-patterns" />
<div class="row row-cards">
<div class="col-12">
preview/pages/payment-providers.astro
+4 -3
View File
@@ -5,16 +5,17 @@ import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import payments from '@data/payments.json'
import CardTitle from '@ui/CardTitle.astro'
const providers = payments as { name: string; logo: string }[]
---
<DefaultLayout title="Payment Providers" pageHeader="Payment Providers" pageMenu="addons.payments">
<DefaultLayout title="Payment Providers" pageMenu="addons.payments">
<div class="row row-cards">
<div class="col-12">
<Card>
<CardHeader>
<h3 class="card-title">Light version</h3>
<CardTitle>Light version</CardTitle>
</CardHeader>
<CardBody>
<div class="row g-5 row-cols-5">
@@ -42,7 +43,7 @@ const providers = payments as { name: string; logo: string }[]
<div class="col-12">
<Card>
<CardHeader>
<h3 class="card-title">Dark version</h3>
<CardTitle>Dark version</CardTitle>
</CardHeader>
<CardBody>
<div class="row g-5 row-cols-5">
preview/pages/photogrid.astro
+1 -1
View File
@@ -8,7 +8,7 @@ import { requireIndex } from '@shared/lib/array'
const photoAt = (i: number) => requireIndex(photosData, i)
---
<DefaultLayout title="Photogrid" pageHeader="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
<DefaultLayout title="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
<div class="row g-2 g-md-3">
<div class="col-lg-6">
<div class="row g-2 g-md-3">
preview/pages/placeholder.astro
+2 -11
View File
@@ -1,27 +1,18 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro'
import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro'
import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro'
import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro'
import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro'
import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
const cols = [1, 2, 3, 4]
const placeholderDocsUrl = getDocsUrl('/ui/components/placeholder')
---
<DefaultLayout title="Placeholder" pageMenu="base.placeholder" description="Placeholders mimic the shape of content that hasn't loaded yet.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Placeholder</PageTitle>
<a href={placeholderDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/placeholder" />
<div class="row row-cards">
{
preview/pages/playground-categories.astro
+1 -1
View File
@@ -11,7 +11,7 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
---
<DefaultLayout title="Categories playground">
<DefaultLayout title="Categories playground" pageHeader={false}>
<!-- Header -->
<div class="row align-items-center gy-3 mb-5">
<div class="col">
preview/pages/playground-layout.astro
+2 -2
View File
@@ -5,12 +5,12 @@ import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<DefaultLayout title="Layout playground" pageHeader="Layout playground" pretitle="Playground" sidebar sidebarDark>
<DefaultLayout title="Layout playground" pretitle="Playground" sidebar sidebarDark>
<div class="row row-cards">
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">Sandbox</CardTitle>
<CardTitle>Sandbox</CardTitle>
<p class="text-secondary mb-0">Edit this page to try layout options, components, and styles.</p>
</CardBody>
</Card>
preview/pages/playground.astro
+2 -1
View File
@@ -9,6 +9,7 @@ import ProgressSteps from '@ui/ProgressSteps.astro'
import Datepicker from '@ui/Datepicker.astro'
import FormGroup from '@ui/FormGroup.astro'
import Trending from '@ui/Trending.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<DefaultLayout title="Playground" pageHeader="Project Settings" pageLibs={['litepicker']}>
@@ -157,7 +158,7 @@ import Trending from '@ui/Trending.astro'
<div class="col-8">
<Card>
<CardBody>
<h3 class="card-title mb-4">Cohort Statistics</h3>
<CardTitle class="mb-4">Cohort Statistics</CardTitle>
<dl class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<Subheader as="dt">Total Users</Subheader>
preview/pages/pricing-table.astro
+1 -1
View File
@@ -5,7 +5,7 @@ import Card from '@ui/Card.astro'
import Subheader from '@ui/Subheader.astro'
---
<DefaultLayout title="Pricing table" pageHeader="Pricing table" pageMenu="extra.pricing-table">
<DefaultLayout title="Pricing table" pageMenu="extra.pricing-table">
<Card>
<div class="table-responsive">
<table class="table table-vcenter table-bordered table-nowrap card-table">
preview/pages/pricing.astro
+1 -1
View File
@@ -4,7 +4,7 @@ import PricingCard from '@shared/components/cards/PricingCard.astro'
import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterprise.astro'
---
<DefaultLayout title="Pricing cards" pageHeader="Pricing cards" pageMenu="extra.pricing">
<DefaultLayout title="Pricing cards" pageMenu="extra.pricing">
<div class="row row-cards">
<div class="col-sm-6 col-lg-3">
<PricingCard price="0" users={3} category="Free" />
preview/pages/profile.astro
+1 -1
View File
@@ -20,7 +20,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
<div class="col-12">
<Card>
<CardBody>
<CardTitle as="h2">About Me</CardTitle>
<CardTitle>About Me</CardTitle>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur doloremque,
preview/pages/progress.astro
+1 -1
View File
@@ -11,7 +11,7 @@ import ProgressBg from '@ui/ProgressBg.astro'
import ProgressDescription from '@ui/ProgressDescription.astro'
---
<DefaultLayout title="Progress" pageHeader="Progress" pageMenu="base.progress">
<DefaultLayout title="Progress" pageMenu="base.progress">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
<div class="col">
<Card>
preview/pages/prose.astro
+2 -11
View File
@@ -1,21 +1,12 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Prose from '@ui/Prose.astro'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const proseDocsUrl = getDocsUrl('/ui/base/prose')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Prose" pageMenu="base.prose" description="Wrap long-form content in .prose to style headings, paragraphs, lists, and tables without adding classes to every element.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Prose</PageTitle>
<a href={proseDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/base/prose" />
<div class="row justify-content-center">
<div class="col-lg-9 col-xl-8">
preview/pages/scroll-spy.astro
+1 -1
View File
@@ -63,7 +63,7 @@ const articles: [string, string[]][] = [
]
---
<DefaultLayout title="Scroll Spy" pageHeader="Scroll Spy" pageMenu="base.scroll-spy">
<DefaultLayout title="Scroll Spy" pageMenu="base.scroll-spy">
<div class="row g-5">
<div class="col-sm-2">
<div class="sticky-top">
preview/pages/search-results.astro
+1 -1
View File
@@ -9,7 +9,7 @@ import { requireIndex } from '@shared/lib/array'
const resultPhotos = photos.filter((photo) => photo.horizontal).slice(0, 18)
---
<DefaultLayout title="Search results" pageHeader="Search results" description="About 2,410 result (0.19 seconds)" pageMenu="extra.search-results">
<DefaultLayout title="Search results" description="About 2,410 result (0.19 seconds)" pageMenu="extra.search-results">
<div class="row g-4">
<div class="col-md-3">
<NavAside />
preview/pages/segmented-control.astro
+2 -11
View File
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const segmentedControlDocsUrl = getDocsUrl('/ui/components/segmented-control')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Segmented control" pageMenu="base.segmented-control" description="A segmented control lets users pick one option from a small, always-visible set.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Segmented control</PageTitle>
<a href={segmentedControlDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/segmented-control" />
<div class="row row-cards">
<div class="col-md-6">
preview/pages/signatures.astro
+1 -1
View File
@@ -57,7 +57,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
});`
---
<DefaultLayout title="Signatures" pageHeader="Signatures" pageMenu="extra.signatures" pageLibs={['signature_pad']}>
<DefaultLayout title="Signatures" pageMenu="extra.signatures" pageLibs={['signature_pad']}>
<div class="row row-cards">
<div class="col-lg-6">
<Card>
preview/pages/social-icons.astro
+2 -11
View File
@@ -7,11 +7,9 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import socialTiles from '@data/social-tiles.json'
import socials from '@data/socials.json'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
interface SocialTile {
icon: string
@@ -28,17 +26,10 @@ interface Social {
const tiles = socialTiles as SocialTile[]
const socialList = socials as Social[]
const fillers = Array.from({ length: 21 })
const socialDocsUrl = getDocsUrl('/ui/plugins/social-icons')
---
<DefaultLayout title="Social icons" pageMenu="base.social" description="Branded icons and helpers for linking out to, or signing in with, social networks.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Social icons</PageTitle>
<a href={socialDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/plugins/social-icons" />
<div class="row row-cards">
<div class="col-12">
preview/pages/stars-rating.astro
+2 -11
View File
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const starsRatingDocsUrl = getDocsUrl('/ui/components/star-rating')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Star Ratings" pageMenu="base.stars-rating" pageLibs={['tabler-flags', 'star-rating.js']} description="An interactive star rating built on the star-rating.js widget, backed by a hidden select for accessibility and forms.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Star Ratings</PageTitle>
<a href={starsRatingDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/star-rating" />
<div class="row row-cards mb-5">
<div class="col-md-6 col-lg-4">
preview/pages/steps.astro
+2 -11
View File
@@ -4,20 +4,11 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const stepDocsUrl = getDocsUrl('/ui/components/step')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Steps" pageMenu="base.steps" description="Steps show progress through a numbered or labeled sequence, as a horizontal bar, breadcrumb, or vertical timeline.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Steps</PageTitle>
<a href={stepDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/step" />
<div class="row row-cards mb-5">
<div class="col-12">
preview/pages/tables.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import AdvancedTable from '@ui/AdvancedTable.astro'
import Card from '@ui/Card.astro'
---
<DefaultLayout title="Tables" pageHeader="Tables" pageMenu="base.tables" pageLibs={['lists']}>
<DefaultLayout title="Tables" pageMenu="base.tables" pageLibs={['lists']}>
<div class="row row-cards">
<div class="col-lg-8">
<Card>
preview/pages/tabs.astro
+2 -11
View File
@@ -1,20 +1,11 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import TabsCard from '@shared/components/cards/TabsCard.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const tabsDocsUrl = getDocsUrl('/ui/layout/navs-tabs')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Tabs" pageMenu="base.tabs" description="Tabs switch between related panels of content inside a card.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Tabs</PageTitle>
<a href={tabsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/layout/navs-tabs" />
<div class="row row-cards">
<div class="col-md-4"><TabsCard id="1" settings /></div>
preview/pages/tags.astro
+2 -11
View File
@@ -6,12 +6,10 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import people from '@data/people.json'
import flags from '@data/flags.json'
import siteData from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus', 'file-minus', 'ghost', 'star', 'script', 'photo', 'dog', 'piano']
@@ -22,17 +20,10 @@ const people8 = people.slice(0, 8)
// site.colors yields value objects with .class / .title.
const colors = Object.values(siteData.colors) as { class: string; title: string }[]
const tagDocsUrl = getDocsUrl('/ui/components/tag')
---
<DefaultLayout title="Tags" pageMenu="base.tags" description="Tags are compact labels for filters, categories, and keywords.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Tags</PageTitle>
<a href={tagDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/tag" />
<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
preview/pages/tasks-list.astro
+3 -2
View File
@@ -11,6 +11,7 @@ import FormGroup from '@ui/FormGroup.astro'
import tasks from '@data/tasks.json'
import people from '@data/people.json'
import { requireIndex } from '@shared/lib/array'
import CardTitle from '@ui/CardTitle.astro'
interface Person {
id?: string
@@ -40,14 +41,14 @@ const peopleList = people as Person[]
const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1))
---
<DefaultLayout title="Task List" pageHeader="Task List" pageMenu="extra.tasks.list">
<DefaultLayout title="Task List" pageMenu="extra.tasks.list">
<div class="row">
<div class="col-12">
{
columns.map((section) => (
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title mb-0">{section.name}</h3>
<CardTitle class="mb-0">{section.name}</CardTitle>
<CardActions>
<Button text="New Task" icon="plus" modalId="add-task" size="sm" />
</CardActions>
preview/pages/tasks.astro
+3 -1
View File
@@ -1,9 +1,11 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Tasks from '@shared/components/parts/Tasks.astro'
import HeaderActionsAddBoard from '@shared/components/layout/HeaderActionsAddBoard.astro'
---
<DefaultLayout title="Tasks" pageHeader="Tabler Inc. Tasks" pageMenu="extra.tasks.kanban" actions="add-board">
<DefaultLayout title="Tasks" pageHeader="Tabler Inc. Tasks" pageMenu="extra.tasks.kanban">
<HeaderActionsAddBoard slot="page-header-actions" />
<ul class="nav nav-bordered mb-4">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">View all</a>
preview/pages/text-features.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import siteData from '@data/site.json'
const homepage = siteData.homepage
---
<DefaultLayout title="Text features" pageHeader="Text features" pageMenu="extra.text-features">
<DefaultLayout title="Text features" pageMenu="extra.text-features">
<div class="row">
<div class="col-7">
<div class="card card-lg">
preview/pages/toasts.astro
+2 -11
View File
@@ -4,21 +4,12 @@ import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Toast from '@ui/Toast.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
const toastDocsUrl = getDocsUrl('/ui/components/toast')
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Toasts" pageMenu="base.toasts" description="Toasts show a brief, dismissible notification in the corner of the screen.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Toasts</PageTitle>
<a href={toastDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/toast" />
<Card>
<CardBody>
preview/pages/tour.astro
+1 -1
View File
@@ -12,7 +12,7 @@ import Badge from '@ui/Badge.astro'
import Icon from '@ui/Icon.astro'
---
<DefaultLayout title="Driver Tour" pageHeader="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
<DefaultLayout title="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
<div class="row row-cards">
<div class="col-12">
<Card>
preview/pages/tracking.astro
+2 -11
View File
@@ -4,10 +4,8 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Icon from '@ui/Icon.astro'
import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro'
import { getDocsUrl } from '@shared/lib/string-format'
import PageTitle from '@ui/PageTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
interface TrackingItem {
status?: 'success' | 'warning' | 'danger'
@@ -47,17 +45,10 @@ const uptime: TrackingItem[] = [
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
]
const trackingDocsUrl = getDocsUrl('/ui/components/tracking')
---
<DefaultLayout title="Tracking" pageMenu="base.tracking" description="Tracking blocks show an uptime or activity history as a row of colored bars.">
<div class="d-flex justify-content-between align-items-center mb-4">
<PageTitle>Tracking</PageTitle>
<a href={trackingDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<DocsLink slot="page-header-actions" path="/ui/components/tracking" />
<div class="row row-cards">
<div class="col-12">
preview/pages/typography.astro
+1 -1
View File
@@ -2,7 +2,7 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
---
<DefaultLayout title="Typography" pageHeader="Typography" pageMenu="base.typography">
<DefaultLayout title="Typography" pageMenu="base.typography">
<div class="card card-lg">
<div class="card-body">
<div class="row g-4">
preview/pages/users.astro
+5 -3
View File
@@ -8,6 +8,7 @@ import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Pagination from '@ui/Pagination.astro'
import people from '@data/people.json'
import HeaderActionsUsers from '@shared/components/layout/HeaderActionsUsers.astro'
interface Person {
full_name?: string
@@ -19,7 +20,8 @@ interface Person {
const users = (people as Person[]).slice(0, 18)
---
<DefaultLayout title="Users list" pageHeader="Users" actions="users" description="1-18 of 413 people" pageMenu="extra.users">
<DefaultLayout title="Users list" pageHeader="Users" description="1-18 of 413 people" pageMenu="extra.users">
<HeaderActionsUsers slot="page-header-actions" />
<div class="row row-cards">
{
users.map((person, idx) => {
@@ -29,9 +31,9 @@ const users = (people as Person[]).slice(0, 18)
<Card>
<CardBody class="p-4 text-center">
<Avatar size="xl" person={person} class="mb-3" />
<h3 class="m-0 mb-1">
<h2 class="m-0 mb-1">
<a href="#">{person.full_name}</a>
</h3>
</h2>
<div class="text-secondary">{person.job_title}</div>
<div class="mt-3">{index === 1 ? <span class="badge bg-purple-lt">Owner</span> : index < 5 ? <span class="badge bg-green-lt">Admin</span> : null}</div>
preview/pages/widgets.astro
+1 -1
View File
@@ -14,7 +14,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
import Configuration from '@shared/components/cards/Configuration.astro'
---
<DefaultLayout title="Widgets" pageHeader="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
<DefaultLayout title="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
<div class="row row-cards">
<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
<StatCard title="Earned" value="$2,847" icon="credit-card" />
preview/pages/wysiwyg.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import Wysiwyg from '@ui/Wysiwyg.astro'
import FormGroup from '@ui/FormGroup.astro'
---
<DefaultLayout title="HugeRTE" pageHeader="HugeRTE" pageLibs={['hugerte']}>
<DefaultLayout title="HugeRTE" pageLibs={['hugerte']}>
<Card>
<CardBody>
<FormGroup label="Your name" for="wysiwyg-name">
shared/components/cards/AuthLockCard.astro
+1 -1
View File
@@ -11,7 +11,7 @@ const person = requireIndex(people, 0)
<form class="card card-md" action="./" method="get" novalidate>
<div class="card-body text-center">
<div class="mb-4">
<CardTitle as="h2">Account Locked</CardTitle>
<CardTitle>Account Locked</CardTitle>
<p class="text-secondary">Please enter your password to unlock your account</p>
</div>
shared/components/cards/AuthenticateAccount.astro
+2 -1
View File
@@ -3,11 +3,12 @@ import FormFooter from '@ui/FormFooter.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CaptureScript from '../CaptureScript.astro'
import CardTitle from '@ui/CardTitle.astro'
---
<form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
<div class="card-body">
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
<CardTitle class="card-title-lg text-center mb-4">Authenticate Your Account</CardTitle>
<p class="my-4 text-center">
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.

Some files were not shown because too many files have changed in this diff Show More