mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
44 Commits
dev-doc-ch
...
@tabler/co
| Author | SHA1 | Date | |
|---|---|---|---|
|
3e35545edc | ||
|
446c34eceb | ||
|
|
90285704e4 | ||
|
|
a7f73d7f7e | ||
|
|
d66c6a70eb | ||
|
|
ad54f61429 | ||
|
|
9007e73cb6 | ||
|
0d106a89b7 | ||
|
|
0d59e2f13a | ||
|
|
8850f6128f | ||
|
|
a1af8014e8 | ||
|
|
c8fee60023 | ||
|
|
d8c70a8b94 | ||
|
|
b70cb48e0b | ||
|
|
5b8746c702 | ||
|
|
f2c0c65f98 | ||
|
|
06021fad99 | ||
|
|
bd67b3f82e | ||
|
|
8e2acc82e0 | ||
|
|
85f212293d | ||
|
|
72a1d67709 | ||
|
|
638f36c0c5 | ||
|
|
f769abd70b | ||
|
3a02ef9c55 | ||
|
38ea9aa4e7 | ||
|
|
acbe4ff35f | ||
|
|
b5e2f54bf8 | ||
|
|
e2411b3518 | ||
|
|
44a1979b78 | ||
|
|
bccdeee779 | ||
|
|
5cb041275d | ||
|
|
27c866b3c3 | ||
|
c127d65605 | ||
|
|
f15d2b97f8 | ||
|
1f4906cc40 | ||
|
|
f8075f69c0 | ||
|
|
fd0fd47bb2 | ||
|
|
a41c9565f1 | ||
|
|
7fc1d5c11c | ||
|
|
222ddd4b2f | ||
|
|
ddd3753cde | ||
|
|
b9d434dcd4 | ||
|
|
6a3513f8e9 | ||
|
|
21bf92608d |
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update illustrations to v1.7
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Add SRI hashes to scripts and styles
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
fix: improve Introduction, Base, Layout and Plugins sections in documentation
|
||||
@@ -3,8 +3,18 @@
|
||||
"changelog": "@changesets/cli/changelog",
|
||||
"commit": false,
|
||||
"fixed": [],
|
||||
"linked": [],
|
||||
"linked": [
|
||||
[
|
||||
"@tabler/core",
|
||||
"@tabler/preview",
|
||||
"@tabler/docs"
|
||||
]
|
||||
],
|
||||
"access": "public",
|
||||
"baseBranch": "dev",
|
||||
"ignore": []
|
||||
"ignore": [],
|
||||
"privatePackages": {
|
||||
"version": true,
|
||||
"tag": false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix input mask example in docs
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update icons to v3.31.0
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix broken links to other docs section and tabler.io website; improve some labels.
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Add "text features" menu item
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Correct `aria-label` of app menu link
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix switch icon examples with filled icons in documentation
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Add missing metadata for Tabler Documentation
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Fix color badge in navbar menu
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix ribbon component in the documentation
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": "patch"
|
||||
---
|
||||
|
||||
Fix colour swatches on small screens
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Add missing `tw` entry in `flags.json`
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Delete missing demo RTL style
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Fix broken RTL preview
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix incorrect label text on form elements docs page
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Use tabs-package include to show webfont install steps
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Demonstrate sticky header table more clearly in docs
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Add new form layout page
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Replace non-existent Vimeo file and enhance the inline player documentation
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Exclude headings inside `.example` from the Table of Contents
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix missing border-radius to `.card-header-tabs`
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Add missing `.steps-vertical` classes in docs
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Use color-input examples in documentation
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Add URL for local dev version of docs app to README
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix `src` links to images in README and getting-started docs page
|
||||
16
README.md
16
README.md
@@ -23,24 +23,8 @@ A premium and open source dashboard template with a responsive and high-quality
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/codecalm" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/sponsor-banner-homepage.svg" alt="Sponsor Banner">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Testing
|
||||
|
||||
<p align="center">Visual testing with:</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://argos-ci.com/" target="_blank">
|
||||
<picture>
|
||||
<img src="https://github.com/user-attachments/assets/7d231a26-eff5-4fc5-8392-b2a679a7c572" alt="Argos-CI" height="164" />
|
||||
</picture>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">Browser testing via:</p>
|
||||
|
||||
<p align="center">
|
||||
|
||||
33
core/.build/copy-libs.mjs
Normal file
33
core/.build/copy-libs.mjs
Normal file
@@ -0,0 +1,33 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
import { existsSync, mkdirSync, lstatSync } from 'fs'
|
||||
import { emptyDirSync, copySync } from 'fs-extra/esm'
|
||||
import libs from '../libs.json' with { type: 'json' }
|
||||
import { fileURLToPath } from 'url'
|
||||
import { join, dirname } from 'node:path';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
emptyDirSync(join(__dirname, '..', 'dist/libs'))
|
||||
|
||||
for(const name in libs) {
|
||||
const { npm } = libs[name]
|
||||
|
||||
if (npm) {
|
||||
const from = join(__dirname, '..', `node_modules/${npm}`)
|
||||
const to = join(__dirname, '..', `dist/libs/${npm}`)
|
||||
|
||||
// create dir in dist/libs
|
||||
if (!existsSync(to)) {
|
||||
mkdirSync(to, { recursive: true })
|
||||
}
|
||||
|
||||
copySync(from, to, {
|
||||
dereference: true,
|
||||
})
|
||||
|
||||
console.log(`Successfully copied ${npm}`)
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,47 @@
|
||||
# @tabler/core
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 446c34e: Fix README file in core package
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- a7f73d7: Fix README file in core package
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- a1af801: Add FullCalendar integration
|
||||
- b9d434d: Add new charts to dashboard pages
|
||||
- 79bd867: Add new form layout page
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- cac5d92: Update illustrations to v1.7
|
||||
- f94b153: Add SRI hashes to scripts and styles
|
||||
- c127d65: Fix colour picker preview page not displaying correctly
|
||||
- b6e9b18: Update icons to v3.31.0
|
||||
- 8850f61: Enhance pagination component with new styles
|
||||
- 9910dd0: Add "text features" menu item
|
||||
- 638f36c: Refactor SCSS variable names for shadows
|
||||
- 0d501e9: Correct `aria-label` of app menu link
|
||||
- 3a02ef9: Fix some marketing site rows overflowing on mobile
|
||||
- fd0fd47: Improve card footer layout and enhance entry display format in invoices
|
||||
- 74e5d26: Fix color badge in navbar menu
|
||||
- 72a1d67: Add clipboard functionality to Tabler documentation
|
||||
- bb617b8: Fix colour swatches on small screens
|
||||
- d73d78e: Add missing `tw` entry in `flags.json`
|
||||
- 19a3d20: Delete missing demo RTL style
|
||||
- b5e2f54: Enhance dropdown components for better accessibility
|
||||
- a41c956: Remove unnecessary `!important` from body padding
|
||||
- e675389: Fix missing border-radius to `.card-header-tabs`
|
||||
- 9007e73: Fix FAQ accordion structure
|
||||
|
||||
## 1.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
42
core/README.md
Normal file
42
core/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Tabler Core
|
||||
|
||||
Tabler Core is a set of components and utilities for building web applications. It provides a collection of pre-designed components, such as buttons, forms, modals, and more, that can be easily customized and integrated into your projects.
|
||||
|
||||
## 🔎 Preview
|
||||
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
|
||||
|
||||
<p align="center">
|
||||
<a href="https://preview.tabler.io" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler Preview">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Installation
|
||||
|
||||
To install Tabler Core, you can use npm or yarn. Run one of the following commands in your terminal:
|
||||
|
||||
```bash
|
||||
npm install @tabler/core
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
pnpm add @tabler/core
|
||||
```
|
||||
|
||||
## Sponsors
|
||||
|
||||
**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/codecalm">
|
||||
<img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
## License
|
||||
|
||||
See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
|
||||
164
core/libs.json
Normal file
164
core/libs.json
Normal file
@@ -0,0 +1,164 @@
|
||||
{
|
||||
"imask": {
|
||||
"npm": "imask",
|
||||
"js": [
|
||||
"dist/imask.min.js"
|
||||
]
|
||||
},
|
||||
"autosize": {
|
||||
"npm": "autosize",
|
||||
"js": [
|
||||
"dist/autosize.min.js"
|
||||
]
|
||||
},
|
||||
"apexcharts": {
|
||||
"npm": "apexcharts",
|
||||
"js": [
|
||||
"dist/apexcharts.min.js"
|
||||
]
|
||||
},
|
||||
"nouislider": {
|
||||
"npm": "nouislider",
|
||||
"js": [
|
||||
"dist/nouislider.min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/nouislider.min.css"
|
||||
]
|
||||
},
|
||||
"countup": {
|
||||
"npm": "countup.js",
|
||||
"js": [
|
||||
"dist/countUp.umd.js"
|
||||
]
|
||||
},
|
||||
"lists": {
|
||||
"npm": "list.js",
|
||||
"js": [
|
||||
"dist/list.min.js"
|
||||
]
|
||||
},
|
||||
"masonry": {
|
||||
"js": [
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
|
||||
]
|
||||
},
|
||||
"mapbox": {
|
||||
"js": [
|
||||
"https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
|
||||
],
|
||||
"css": [
|
||||
"https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
|
||||
]
|
||||
},
|
||||
"google-maps": {
|
||||
"js": [
|
||||
"https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"
|
||||
]
|
||||
},
|
||||
"litepicker": {
|
||||
"npm": "litepicker",
|
||||
"js": [
|
||||
"dist/litepicker.js"
|
||||
]
|
||||
},
|
||||
"tom-select": {
|
||||
"npm": "tom-select",
|
||||
"js": [
|
||||
"dist/js/tom-select.base.min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/css/tom-select.bootstrap5.min.css"
|
||||
]
|
||||
},
|
||||
"jsvectormap": {
|
||||
"npm": "jsvectormap",
|
||||
"js": [
|
||||
"dist/jsvectormap.min.js",
|
||||
"dist/maps/world.js",
|
||||
"dist/maps/world-merc.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/jsvectormap.css"
|
||||
]
|
||||
},
|
||||
"fslightbox": {
|
||||
"npm": "fslightbox",
|
||||
"js": [
|
||||
"index.js"
|
||||
]
|
||||
},
|
||||
"hugerte": {
|
||||
"npm": "hugerte",
|
||||
"js": [
|
||||
"hugerte.min.js"
|
||||
]
|
||||
},
|
||||
"plyr": {
|
||||
"npm": "plyr",
|
||||
"js": [
|
||||
"dist/plyr.min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/plyr.css"
|
||||
]
|
||||
},
|
||||
"dropzone": {
|
||||
"npm": "dropzone",
|
||||
"js": [
|
||||
"dist/dropzone-min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/dropzone.css"
|
||||
]
|
||||
},
|
||||
"star-rating.js": {
|
||||
"npm": "star-rating.js",
|
||||
"js": [
|
||||
"dist/star-rating.min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/star-rating.min.css"
|
||||
]
|
||||
},
|
||||
"coloris.js": {
|
||||
"npm": "@melloware/coloris",
|
||||
"js": [
|
||||
"dist/umd/coloris.min.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/coloris.min.css"
|
||||
]
|
||||
},
|
||||
"typed.js": {
|
||||
"npm": "typed.js",
|
||||
"js": [
|
||||
"dist/typed.umd.js"
|
||||
]
|
||||
},
|
||||
"signature_pad": {
|
||||
"npm": "signature_pad",
|
||||
"js": [
|
||||
"dist/signature_pad.umd.min.js"
|
||||
]
|
||||
},
|
||||
"clipboard": {
|
||||
"npm": "clipboard",
|
||||
"js": [
|
||||
"dist/clipboard.min.js"
|
||||
]
|
||||
},
|
||||
"fullcalendar": {
|
||||
"npm": "fullcalendar",
|
||||
"js": [
|
||||
"index.global.min.js"
|
||||
]
|
||||
},
|
||||
"turbo": {
|
||||
"npm": "@hotwired/turbo",
|
||||
"js": [
|
||||
"dist/turbo.es2017-umd.js"
|
||||
],
|
||||
"head": true
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.2",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
"dev": "pnpm run watch",
|
||||
"dev": "pnpm run clean && pnpm run copy && pnpm run watch",
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
||||
"clean": "shx rm -rf dist demo",
|
||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
||||
@@ -26,8 +26,9 @@
|
||||
"js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
|
||||
"js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
|
||||
"js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
|
||||
"copy": "pnpm run copy-img",
|
||||
"copy": "pnpm run copy-img && pnpm run copy-libs",
|
||||
"copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
|
||||
"copy-libs": "node .build/copy-libs.mjs",
|
||||
"watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
|
||||
"watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
|
||||
"watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
|
||||
@@ -66,7 +67,8 @@
|
||||
"dist/**/*",
|
||||
"js/**/*.{js,map}",
|
||||
"img/**/*.{svg}",
|
||||
"scss/**/*.scss"
|
||||
"scss/**/*.scss",
|
||||
"libs.json"
|
||||
],
|
||||
"style": "dist/css/tabler.css",
|
||||
"sass": "scss/tabler.scss",
|
||||
@@ -144,7 +146,31 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "5.3.5"
|
||||
"bootstrap": "5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.24.2",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.8.2",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.6.0",
|
||||
"fullcalendar": "^6.1.17",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.7",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
|
||||
@@ -42,9 +42,9 @@
|
||||
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
|
||||
}
|
||||
|
||||
/** Social colors */
|
||||
@each $name, $color in $social-colors {
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
/** Gray colors */
|
||||
@each $name, $color in $gray-colors {
|
||||
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
|
||||
}
|
||||
|
||||
/** Spacers */
|
||||
|
||||
@@ -279,6 +279,7 @@ $gray-colors: (
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900,
|
||||
gray-950: $gray-950,
|
||||
) !default;
|
||||
|
||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
|
||||
@@ -320,10 +321,10 @@ $border-values: (
|
||||
$icon-color: var(--#{$prefix}gray-400) !default;
|
||||
|
||||
// Code
|
||||
$code-color: var(--#{$prefix}primary) !default;
|
||||
$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
|
||||
$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
|
||||
$code-font-size: $font-size-reative-sm !default;
|
||||
$code-line-height: 1.25rem !default;
|
||||
$code-bg: var(--#{$prefix}primary-lt) !default;
|
||||
|
||||
$pre-padding: 1rem !default;
|
||||
$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
|
||||
@@ -627,8 +628,8 @@ $btn-box-shadow: var(--#{$prefix}shadow-input) !default;
|
||||
|
||||
// Cards
|
||||
$card-title-spacer-y: 1.25rem !default;
|
||||
$card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
|
||||
$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
|
||||
$card-box-shadow: var(--#{$prefix}shadow-card) !default;
|
||||
$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
|
||||
|
||||
$card-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$card-bg-hover: $white !default;
|
||||
@@ -829,7 +830,7 @@ $popover-border-color: var(--#{$prefix}border-color) !default;
|
||||
$popover-body-color: inherit !default;
|
||||
$popover-body-padding-x: .5rem !default;
|
||||
$popover-body-padding-y: .5rem !default;
|
||||
$popover-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
|
||||
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
||||
|
||||
// Footer
|
||||
$footer-padding-y: 2rem !default;
|
||||
@@ -838,13 +839,17 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
|
||||
$footer-color: var(--#{$prefix}gray-500) !default;
|
||||
|
||||
// Pagination
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-padding-y: 0.25rem !default;
|
||||
$pagination-border-width: 1px !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-padding-y: calc(0.25rem + 1px) !default;
|
||||
$pagination-padding-x: 0.25rem !default;
|
||||
$pagination-color: var(--#{$prefix}gray-500) !default;
|
||||
$pagination-color: var(--#{$prefix}body-color) !default;
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
|
||||
$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
|
||||
$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
|
||||
|
||||
$pagination-active-bg: var(--#{$prefix}primary) !default;
|
||||
$pagination-active-border-color: var(--#{$prefix}primary) !default;
|
||||
|
||||
@@ -7,7 +7,7 @@ body {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
padding: 0;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@@ -61,9 +61,6 @@
|
||||
|
||||
--#{$prefix}btn-color: #{$darken-dark};
|
||||
|
||||
--#{$prefix}code-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}code-bg: #{$border-dark-color-dark};
|
||||
|
||||
.navbar-brand-autodark {
|
||||
.navbar-brand-image {
|
||||
@include autodark-image;
|
||||
|
||||
@@ -13,4 +13,4 @@
|
||||
@import "vendor/coloris";
|
||||
@import "vendor/typed";
|
||||
@import "vendor/turbo";
|
||||
|
||||
@import "vendor/fullcalendar";
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
Markdown
|
||||
*/
|
||||
.markdown {
|
||||
font-size: $font-size-200;
|
||||
line-height: $line-height-xl;
|
||||
|
||||
> :first-child {
|
||||
@@ -48,7 +47,7 @@ Markdown
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
> pre {
|
||||
pre {
|
||||
max-height: 20rem;
|
||||
}
|
||||
}
|
||||
@@ -44,6 +44,10 @@
|
||||
margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
|
||||
border: 0;
|
||||
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
.pagination {
|
||||
margin: 0;
|
||||
--#{$prefix}pagination-gap: .25rem;
|
||||
user-select: none;
|
||||
gap: var(--#{$prefix}pagination-gap);
|
||||
line-height: var(--#{$prefix}body-line-height);
|
||||
}
|
||||
|
||||
.page-link {
|
||||
min-width: 1.75rem;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
min-width: 2rem;
|
||||
border-radius: var(--#{$prefix}pagination-border-radius);
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.page-text {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
text-align: center;
|
||||
|
||||
&:not(.active) {
|
||||
.page-link {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-prev,
|
||||
&.page-next {
|
||||
flex: 0 0 50%;
|
||||
@@ -56,3 +59,13 @@
|
||||
color: $pagination-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-outline {
|
||||
--#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}pagination-border-width: 1px;
|
||||
}
|
||||
|
||||
.pagination-circle {
|
||||
--#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
|
||||
}
|
||||
@@ -216,7 +216,7 @@ Mentions
|
||||
*/
|
||||
.mention {
|
||||
display: inline-block;
|
||||
box-shadow: var(--#{$prefix}box-shadow-border);
|
||||
box-shadow: var(--#{$prefix}shadow-border);
|
||||
border-radius: var(--#{$prefix}border-radius-pill);
|
||||
line-height: calc(16em / 12);
|
||||
font-size: calc(12em / 14);
|
||||
@@ -245,7 +245,7 @@ Mentions
|
||||
margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
|
||||
display: inline-flex;
|
||||
background: no-repeat center center/cover;
|
||||
box-shadow: var(--#{$prefix}box-shadow-border);
|
||||
box-shadow: var(--#{$prefix}shadow-border);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
.text-#{"" + $color}-fg {
|
||||
color: $value !important;
|
||||
color: var(--#{$prefix}#{$color}-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.text-#{"" + $color}-fg {
|
||||
color: $value !important;
|
||||
color: var(--#{$prefix}#{$color}-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
4
core/scss/vendor/_apexcharts.scss
vendored
4
core/scss/vendor/_apexcharts.scss
vendored
@@ -45,4 +45,8 @@
|
||||
.apexcharts-svg,
|
||||
.apexcharts-canvas {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.apexcharts-pie-area {
|
||||
stroke: var(--#{$prefix}bg-surface) !important;
|
||||
}
|
||||
55
core/scss/vendor/_fullcalendar.scss
vendored
Normal file
55
core/scss/vendor/_fullcalendar.scss
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
:root {
|
||||
--fc-border-color: var(--#{$prefix}border-color);
|
||||
--fc-daygrid-event-dot-width: 5px;
|
||||
|
||||
--fc-event-bg-color: var(--#{$prefix}primary-lt);
|
||||
--fc-event-border-color: var(--#{$prefix}primary-200);
|
||||
--fc-event-text-color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
font-size: var(--#{$prefix}font-size-h3) !important;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
}
|
||||
|
||||
.fc-daygrid-dot-event {
|
||||
background-color: var(--fc-event-bg-color);
|
||||
border: 1px solid var(--fc-event-border-color);
|
||||
color: var(--fc-event-text-color);
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.fc-event-title {
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-col-header-cell {
|
||||
background-color: var(--#{$prefix}bg-surface-secondary);
|
||||
color: var(--#{$prefix}secondary);
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
font-size: var(--#{$prefix}font-size-h5);
|
||||
padding-top: .5rem !important;
|
||||
padding-bottom: .5rem !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-weight: var(--#{$prefix}font-weight-bold) !important;
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
color: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
background-color: transparent !important;
|
||||
border-color: var(--#{$prefix}border-color) !important;
|
||||
font-weight: var(--#{$prefix}font-weight-medium) !important;
|
||||
}
|
||||
34
core/scss/vendor/_tinymce.scss
vendored
34
core/scss/vendor/_tinymce.scss
vendored
@@ -1,34 +0,0 @@
|
||||
.tox-hugerte {
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
|
||||
border-radius: $border-radius !important;
|
||||
font-family: var(--#{$prefix}font-sans-serif) !important;
|
||||
}
|
||||
|
||||
.tox-toolbar__group {
|
||||
padding: 0 .5rem 0;
|
||||
}
|
||||
|
||||
.tox .tox-toolbar__primary {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.tox:not(.tox-hugerte-inline) {
|
||||
.tox-editor-header {
|
||||
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-tbtn {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.tox-statusbar {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tox .tox-toolbar-overlord,
|
||||
.tox:not(.tox-hugerte-inline) .tox-editor-header {
|
||||
background: transparent !important;
|
||||
}
|
||||
14
core/scss/vendor/_wysiwyg.scss
vendored
14
core/scss/vendor/_wysiwyg.scss
vendored
@@ -21,7 +21,19 @@
|
||||
}
|
||||
|
||||
.tox-tbtn {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
background: var(--#{$prefix}bg-surface) !important;
|
||||
|
||||
&:hover,
|
||||
&.tox-tbtn--enabled {
|
||||
background: var(--#{$prefix}bg-surface-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-edit-area {
|
||||
&::before {
|
||||
border: none !important
|
||||
}
|
||||
}
|
||||
|
||||
.tox-statusbar {
|
||||
|
||||
@@ -1,5 +1,67 @@
|
||||
# @tabler/docs
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [446c34e]
|
||||
- @tabler/core@1.3.2
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a7f73d7]
|
||||
- @tabler/core@1.3.1
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 8f70185: Improve Introduction, Base, Layout and Plugins sections in documentation
|
||||
- e546706: Fix input mask example in docs
|
||||
- 8850f61: Enhance pagination component with new styles
|
||||
- 8470c9b: Fix broken links to other docs section and tabler.io website; improve some labels.
|
||||
- 6a3513f: Fix links in Tabler Emails introduction, improve "How to contribute" and other small fixes
|
||||
- 278967b: Fix switch icon examples with filled icons in documentation
|
||||
- 38ea9aa: Use primary color for `::selection` inside `<code>` in docs
|
||||
- 5b3e201: Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links
|
||||
- 7b72653: Fix ribbon component in the documentation
|
||||
- c42b104: Fix incorrect label text on form elements docs page
|
||||
- 895f943: Use tabs-package include to show webfont install steps
|
||||
- 665472c: Demonstrate sticky header table more clearly in docs
|
||||
- 7917f86: Replace non-existent Vimeo file and enhance the inline player documentation
|
||||
- 7fc1d5c: Exclude headings in the carousel and modal examples from ToC
|
||||
- 7773ff2: Exclude headings inside `.example` from the Table of Contents
|
||||
- 222ddd4: Change WYSIWYG title to uppercase
|
||||
- 9b15b94: Add missing `.steps-vertical` classes in docs
|
||||
- 5fa662b: Use color-input examples in documentation
|
||||
- 5619b2d: Fix `src` links to images in README and getting-started docs page
|
||||
- f8075f6: Add documentation for 3rd-party libraries and resources
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -44,8 +44,8 @@ The **Tabler Emails** package is organized into a clear and efficient folder str
|
||||
|
||||
### 1. Email Templates: `emails/`
|
||||
This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files:
|
||||
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/img/emails/compiled-html) section.
|
||||
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/img/emails/source-html) section.
|
||||
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/emails/introduction/compiled-html) section.
|
||||
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/emails/introduction/source-html) section.
|
||||
* Screenshot images for desktop and mobile views.
|
||||
* Assets folder with images used in the email template and the CSS file with styles.
|
||||
|
||||
|
||||
@@ -10,50 +10,56 @@ bootstrapLink: components/badge/
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge bg-blue-lt">Blue</span>
|
||||
<span class="badge bg-azure-lt">Azure</span>
|
||||
<span class="badge bg-indigo-lt">Indigo</span>
|
||||
<span class="badge bg-purple-lt">Purple</span>
|
||||
<span class="badge bg-pink-lt">Pink</span>
|
||||
<span class="badge bg-red-lt">Red</span>
|
||||
<span class="badge bg-orange-lt">Orange</span>
|
||||
<span class="badge bg-yellow-lt">Yellow</span>
|
||||
<span class="badge bg-lime-lt">Lime</span>
|
||||
<span class="badge bg-green-lt">Green</span>
|
||||
<span class="badge bg-teal-lt">Teal</span>
|
||||
<span class="badge bg-cyan-lt">Cyan</span>
|
||||
<div class="badges-list">
|
||||
{% for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title %}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Headings
|
||||
|
||||
Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
|
||||
|
||||
{% capture html -%}
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
<h1>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h1>
|
||||
<h2>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h2>
|
||||
<h3>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h3>
|
||||
<h4>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h4>
|
||||
<h5>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h5>
|
||||
<h6>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h6>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Outline badges
|
||||
## Light versions of badges
|
||||
|
||||
You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
|
||||
|
||||
For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-outline text-blue">blue</span>
|
||||
<span class="badge badge-outline text-azure">azure</span>
|
||||
<span class="badge badge-outline text-indigo">indigo</span>
|
||||
<span class="badge badge-outline text-purple">purple</span>
|
||||
<span class="badge badge-outline text-pink">pink</span>
|
||||
<span class="badge badge-outline text-red">red</span>
|
||||
<span class="badge badge-outline text-orange">orange</span>
|
||||
<span class="badge badge-outline text-yellow">yellow</span>
|
||||
<span class="badge badge-outline text-lime">lime</span>
|
||||
<span class="badge badge-outline text-green">green</span>
|
||||
<span class="badge badge-outline text-teal">teal</span>
|
||||
<span class="badge badge-outline text-cyan">cyan</span>
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title light %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -62,18 +68,44 @@ The default badges are square and come in the basic set of colors.
|
||||
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-pill bg-blue-lt">1</span>
|
||||
<span class="badge badge-pill bg-azure-lt">2</span>
|
||||
<span class="badge badge-pill bg-indigo-lt">3</span>
|
||||
<span class="badge badge-pill bg-purple-lt">4</span>
|
||||
<span class="badge badge-pill bg-pink-lt">5</span>
|
||||
<span class="badge badge-pill bg-red-lt">6</span>
|
||||
<span class="badge badge-pill bg-orange-lt">7</span>
|
||||
<span class="badge badge-pill bg-yellow-lt">8</span>
|
||||
<span class="badge badge-pill bg-lime-lt">9</span>
|
||||
<span class="badge badge-pill bg-green-lt">10</span>
|
||||
<span class="badge badge-pill bg-teal-lt">11</span>
|
||||
<span class="badge badge-pill bg-cyan-lt">12</span>
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
|
||||
|
||||
{% capture html -%}
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Badges with icons
|
||||
|
||||
You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon="star" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon="heart" -%}
|
||||
{% include "ui/badge.html" text="Check" icon="check" -%}
|
||||
{% include "ui/badge.html" text="X" icon="x" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon="plus" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon="minus" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -99,14 +131,55 @@ Place the badge within an `<a>` element if you want it to perform the function o
|
||||
|
||||
## Button with badge
|
||||
|
||||
Badges can be used as part of links or buttons to provide, for example, a counter.
|
||||
Badges can be used as parts of links or buttons to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
|
||||
|
||||
If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-red-lt ms-2">4</span>
|
||||
Notifications {% include "ui/badge.html" text="2" color="red" class="ms-2" -%}
|
||||
</button>
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-green-lt ms-2">4</span>
|
||||
Inbox {% include "ui/badge.html" text="4" color="red" class="badge-notification" -%}
|
||||
</button>
|
||||
<button type="button" class="btn">
|
||||
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification" -%}
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Animated badges
|
||||
|
||||
You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">
|
||||
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification badge-blink" -%}
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Size Options
|
||||
|
||||
Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
|
||||
|
||||
{% capture html -%}
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" scale="sm" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" scale="sm" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" scale="lg" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" scale="lg" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
|
||||
## More examples
|
||||
|
||||
If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview.
|
||||
@@ -12,19 +12,9 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett
|
||||
Look at the example below to see how breadcrumbs work in practice.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Different separators
|
||||
|
||||
@@ -33,60 +23,18 @@ You can use different breadcrumb styles to match your website or app design. Cho
|
||||
This example shows how to use different breadcrumb styles.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb breadcrumb-dots">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-arrows">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-bullets">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %}
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %}
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
{% include "docs/example.html" html=html vertical separated centered %}
|
||||
|
||||
## With icon
|
||||
|
||||
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
|
||||
@@ -95,19 +43,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
|
||||
You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
|
||||
|
||||
{% capture html -%}
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-muted">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
@@ -119,24 +55,9 @@ You can use breadcrumbs in headers to show the current page location and provide
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center mw-100">
|
||||
<div class="col">
|
||||
<div class="mb-1">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Articles</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}
|
||||
<h2 class="page-title">
|
||||
<span class="text-truncate"
|
||||
>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
|
||||
woods.</span
|
||||
>
|
||||
<span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
@@ -151,5 +72,5 @@ You can use breadcrumbs in headers to show the current page location and provide
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ As one of the most common elements of UI design, buttons have a very important f
|
||||
<input type="submit" class="btn" value="Submit" />
|
||||
<input type="reset" class="btn" value="Reset" />
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Default button
|
||||
|
||||
@@ -25,7 +25,7 @@ The standard button creates a white background and subtle hover animation. It's
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button variations
|
||||
|
||||
@@ -41,7 +41,7 @@ Use the button classes that correspond to the function of your button. The big r
|
||||
<a href="#" class="btn btn-dark">Dark</a>
|
||||
<a href="#" class="btn btn-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Disabled buttons
|
||||
|
||||
@@ -57,7 +57,7 @@ Make buttons look inactive to show that an action is possible once the user meet
|
||||
<a href="#" class="btn btn-dark disabled">Dark</a>
|
||||
<a href="#" class="btn btn-light disabled">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Color variations
|
||||
|
||||
@@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d
|
||||
<a href="#" class="btn btn-teal">Teal</a>
|
||||
<a href="#" class="btn btn-cyan">Cyan</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Ghost buttons
|
||||
|
||||
@@ -95,7 +95,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
|
||||
<a href="#" class="btn btn-ghost-light">Light</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical -%}
|
||||
{%- include "docs/example.html" html=html separated vertical %}
|
||||
|
||||
## Square buttons
|
||||
|
||||
@@ -104,7 +104,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-square">Square button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Pill buttons
|
||||
|
||||
@@ -113,7 +113,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-pill">Pill button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Outline buttons
|
||||
|
||||
@@ -129,7 +129,7 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
|
||||
<a href="#" class="btn btn-outline-dark">Dark</a>
|
||||
<a href="#" class="btn btn-outline-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button size
|
||||
|
||||
@@ -139,13 +139,13 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-lg">Large button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-sm">Small button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
@@ -179,7 +179,7 @@ See all icons at [tabler.io/icons]({{ site.icons.link }}).
|
||||
Comment
|
||||
</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Social buttons
|
||||
|
||||
@@ -243,7 +243,7 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
Tabler
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook">
|
||||
@@ -298,7 +298,7 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
{%- include "ui/icon.html" icon="brand-tabler" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated vertical hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
@@ -333,7 +333,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
{%- include "ui/icon.html" icon="git-merge" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
@@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered hide-code height="260px" -%}
|
||||
{%- include "docs/example.html" html=html centered hide-code height="260px" %}
|
||||
|
||||
```html
|
||||
<div class="dropdown">
|
||||
@@ -399,7 +399,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
Loading button with loooong content
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary">
|
||||
@@ -407,7 +407,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
Button
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## List of buttons
|
||||
|
||||
@@ -420,7 +420,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
|
||||
<a href="#" class="btn btn-danger">Cancel</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
|
||||
|
||||
@@ -447,7 +447,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
|
||||
<a href="#" class="btn">Nineteen</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
|
||||
|
||||
@@ -457,7 +457,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list justify-content-end">
|
||||
@@ -465,7 +465,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
@@ -474,7 +474,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
@@ -507,4 +507,4 @@ Use buttons with avatars to simplify the process of interaction and make your de
|
||||
Avatar
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Dropzone
|
||||
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
|
||||
description: Drag-and-drop file upload tool.
|
||||
docs-libs: dropzone
|
||||
---
|
||||
|
||||
## Basic usage
|
||||
|
||||
@@ -5,7 +5,7 @@ banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
|
||||
## Base icon
|
||||
|
||||
|
||||
59
docs/content/ui/components/pagination.md
Normal file
59
docs/content/ui/components/pagination.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Pagination
|
||||
summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
|
||||
---
|
||||
|
||||
## Basic Example
|
||||
|
||||
Use slightly customized pagination with previous and next icon links:
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
## With First and Last links
|
||||
|
||||
When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" first-last %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
## Offset
|
||||
|
||||
If the count of pages is too large, you can use offset to show only a few pages at a time.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" offset=3 count=20 %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
## Button With Text
|
||||
|
||||
When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" text %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
## Outline version
|
||||
|
||||
If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" class="pagination-outline" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
## Circle version
|
||||
|
||||
If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/pagination.html" class="pagination-circle" %}
|
||||
{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical separated %}
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: TinyMCE
|
||||
docs-libs: tinymce
|
||||
summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
|
||||
description: Flexible WYSIWYG editor for content.
|
||||
---
|
||||
|
||||
[TinyMCE](https://www.tiny.cloud/docs/) documentation.
|
||||
|
||||
## Default text editor
|
||||
|
||||
Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector value to `tinymce.init()`. The selector value can be any valid CSS selector.
|
||||
|
||||
{% capture html -%}
|
||||
<form method="post">
|
||||
<textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
|
||||
</form>
|
||||
<script src="{{ cdnUrl }}/dist/libs/tinymce/tinymce.min.js" defer></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let options = {
|
||||
selector: "#tinymce-default",
|
||||
height: 300,
|
||||
menubar: false,
|
||||
statusbar: false,
|
||||
plugins: [
|
||||
"advlist autolink lists link image charmap print preview anchor",
|
||||
"searchreplace visualblocks code fullscreen",
|
||||
"insertdatetime media table paste code help wordcount",
|
||||
],
|
||||
toolbar:
|
||||
"undo redo | formatselect | " +
|
||||
"bold italic backcolor | alignleft aligncenter " +
|
||||
"alignright alignjustify | bullist numlist outdent indent | " +
|
||||
"removeformat",
|
||||
content_style:
|
||||
"body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }",
|
||||
};
|
||||
if (localStorage.getItem("tablerTheme") === "dark") {
|
||||
options.skin = "oxide-dark";
|
||||
options.content_css = "dark";
|
||||
}
|
||||
tinyMCE.init(options);
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Vector Maps
|
||||
docs-libs: [jsvectormap, jsvectormap-world, jsvectormap-world-merc]
|
||||
docs-libs: [jsvectormap]
|
||||
description: Interactive guide to creating vector maps with jsVectorMap.
|
||||
summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
|
||||
---
|
||||
@@ -14,55 +14,22 @@ To use vector maps in your project, you need to include the jsVectorMap library
|
||||
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
|
||||
```
|
||||
|
||||
## Sample demo
|
||||
## Default map
|
||||
|
||||
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
|
||||
|
||||
```html
|
||||
<div id="map-world" class="w-100 h-100"></div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world",
|
||||
map: "world",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="empty" %}
|
||||
{{ script }}
|
||||
```
|
||||
|
||||
## Sample demo
|
||||
|
||||
Look at the example below to see how the vector map works with a world map.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div>
|
||||
<div id="map-world" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world",
|
||||
map: "world",
|
||||
backgroundColor: "transparent",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: "var(--tblr-body-bg)",
|
||||
stroke: "var(--tblr-border-color)",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="world" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
@@ -71,99 +38,17 @@ Look at the example below to see how the vector map works with a world map.
|
||||
You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div>
|
||||
<div id="map-world-markers" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world-markers",
|
||||
map: "world_merc",
|
||||
backgroundColor: "transparent",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: "var(--tblr-body-bg)",
|
||||
stroke: "var(--tblr-border-color)",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
markers: [
|
||||
{
|
||||
coords: [61.524, 105.3188],
|
||||
name: "Russia",
|
||||
},
|
||||
{
|
||||
coords: [56.1304, -106.3468],
|
||||
name: "Canada",
|
||||
},
|
||||
{
|
||||
coords: [71.7069, -42.6043],
|
||||
name: "Greenland",
|
||||
},
|
||||
{
|
||||
coords: [26.8206, 30.8025],
|
||||
name: "Egypt",
|
||||
},
|
||||
{
|
||||
coords: [-14.235, -51.9253],
|
||||
name: "Brazil",
|
||||
},
|
||||
{
|
||||
coords: [35.8617, 104.1954],
|
||||
name: "China",
|
||||
},
|
||||
{
|
||||
coords: [37.0902, -95.7129],
|
||||
name: "United States",
|
||||
},
|
||||
{
|
||||
coords: [60.472024, 8.468946],
|
||||
name: "Norway",
|
||||
},
|
||||
{
|
||||
coords: [48.379433, 31.16558],
|
||||
name: "Ukraine",
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 4,
|
||||
stroke: "#fff",
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: 0.5,
|
||||
fill: "var(--tblr-primary)",
|
||||
},
|
||||
hover: {
|
||||
fill: "var(--tblr-primary)",
|
||||
stroke: "var(--tblr-primary)",
|
||||
},
|
||||
},
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name;
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="world-markers" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Lines
|
||||
|
||||
You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/map-vector.html" map-id="world-lines" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
18
docs/content/ui/components/wysiwyg.md
Normal file
18
docs/content/ui/components/wysiwyg.md
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: WYSIWYG editor
|
||||
docs-libs: [hugerte]
|
||||
summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
|
||||
description: Flexible WYSIWYG editor for content.
|
||||
---
|
||||
|
||||
[HugeRTE](https://hugerte.org/) documentation.
|
||||
|
||||
## Default text editor
|
||||
|
||||
Initialize HugeRTE on any element (or elements) on the web page by passing an object containing a selector value to `hugerte.init()`. The selector value can be any valid CSS selector.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/wysiwyg.html" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
@@ -418,8 +418,6 @@ Add a range slider to make it possible for users to set a value or range, such a
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Range input</label>
|
||||
<input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" />
|
||||
<div class="form-range mb-2" id="range-simple"></div>
|
||||
<div class="form-range mb-2" id="range-connect"></div>
|
||||
<div class="form-range mb-2 text-green" id="range-color"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
@@ -39,16 +39,16 @@ To set up Tabler for development, follow these steps:
|
||||
|
||||
<div class="steps steps-vertical">
|
||||
|
||||
### Ensure Node.js and npm are installed
|
||||
### Ensure Node.js and pnpm are installed
|
||||
|
||||
You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
|
||||
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
|
||||
|
||||
### Install dependencies
|
||||
|
||||
Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
|
||||
Run the following command to install all required npm packages:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
@@ -56,7 +56,7 @@ pnpm install
|
||||
|
||||
### Start developer mode
|
||||
|
||||
Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
|
||||
Use the following command to enable autocompilation with live reload. This will start up the preview website at `http://localhost:3000/`, and the documentation website at `http://localhost:3010/`:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
@@ -64,7 +64,7 @@ pnpm run dev
|
||||
|
||||
### Make changes
|
||||
|
||||
Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
|
||||
Make your changes in the appropriate folders, such as `./core/`, `./preview/` or `./docs/`. Avoid modifying files in any `dist` folders, as they are auto-generated during the build process and will be overwritten.
|
||||
</div>
|
||||
|
||||
## Compiling for Production
|
||||
|
||||
7
docs/content/ui/getting-started/references.md
Normal file
7
docs/content/ui/getting-started/references.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 3rd-party Libraries & Resources
|
||||
---
|
||||
|
||||
Tabler uses the following open source resources:
|
||||
|
||||
{% include "docs/open-source-resources.html" %}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { appFilters } from "../shared/e11ty/filters.mjs"
|
||||
import { appData, getCopyList } from "../shared/e11ty/data.mjs";
|
||||
import { appData } from "../shared/e11ty/data.mjs";
|
||||
import { readFileSync, existsSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { join, dirname } from 'node:path';
|
||||
@@ -17,7 +17,7 @@ export default function (eleventyConfig) {
|
||||
appData(eleventyConfig);
|
||||
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
...getCopyList(),
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
"public": "/",
|
||||
"static": "static",
|
||||
});
|
||||
@@ -163,7 +163,17 @@ export default function (eleventyConfig) {
|
||||
children: []
|
||||
}
|
||||
}).sort((a, b) => {
|
||||
return (a.data.order || 999) - (b.data.order || 999);
|
||||
const orderA = a.data.order ?? 999;
|
||||
const orderB = b.data.order ?? 999;
|
||||
|
||||
if (orderA !== orderB) {
|
||||
return orderA - orderB;
|
||||
}
|
||||
|
||||
const titleA = a.data.title ?? '';
|
||||
const titleB = b.data.title ?? '';
|
||||
|
||||
return titleA.localeCompare(titleB);
|
||||
});
|
||||
|
||||
return buildCollectionTree(a);
|
||||
@@ -226,7 +236,7 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addFilter("toc", function (name) {
|
||||
const toc = [];
|
||||
|
||||
const contentWithoutExamples = name.replace(/<div[^>]*\bclass=["'][^"']*\bexample\b[^"']*".*?>.*?<\/div>/gs, '');
|
||||
const contentWithoutExamples = name.replace(/<!--EXAMPLE-->[\s\S]*?<!--\/EXAMPLE-->/g, '');
|
||||
const headings = contentWithoutExamples.match(/<h([23])>([^<]+)<\/h\1>/g);
|
||||
|
||||
if (headings) {
|
||||
|
||||
@@ -5,4 +5,4 @@ docsearch({
|
||||
appId: "NE1EGTYLS9",
|
||||
indexName: "tabler",
|
||||
apiKey: "016353235ef1dd32a6c392be0e939058",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/docs",
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.2",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -24,36 +24,14 @@
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.24.0",
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"countup.js": "^2.8.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.5.1",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.7",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@11ty/eleventy-navigation": "^1.0.4",
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@docsearch/css": "^3.9.0",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"flat-cache": "^6.1.8",
|
||||
"shiki": "^3.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*"
|
||||
}
|
||||
}
|
||||
BIN
docs/public/img/banner-carbon.png
Normal file
BIN
docs/public/img/banner-carbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@@ -53,3 +53,9 @@
|
||||
background: var(--tblr-gray-900) !important;
|
||||
color: var(--tblr-gray-300) !important;
|
||||
}
|
||||
|
||||
code {
|
||||
::selection {
|
||||
background: var(--tblr-primary);
|
||||
}
|
||||
}
|
||||
|
||||
19
package.json
19
package.json
@@ -14,11 +14,11 @@
|
||||
"zip-package": "node .build/zip-package.mjs",
|
||||
"start": "pnpm dev"
|
||||
},
|
||||
"packageManager": "pnpm@10.8.1",
|
||||
"packageManager": "pnpm@10.11.0",
|
||||
"devDependencies": {
|
||||
"@argos-ci/playwright": "^4.1.0",
|
||||
"@argos-ci/playwright": "^5.0.3",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.2",
|
||||
"@changesets/cli": "^2.29.4",
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
@@ -30,20 +30,21 @@
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"concurrently": "^9.1.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"glob": "^11.0.1",
|
||||
"fs-extra": "^11.3.0",
|
||||
"glob": "^11.0.2",
|
||||
"js-beautify": "^1.15.4",
|
||||
"nodemon": "^3.1.9",
|
||||
"nodemon": "^3.1.10",
|
||||
"pnpm": "10.6.5",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"prettier": "^3.5.3",
|
||||
"rollup": "4.40.0",
|
||||
"rollup": "4.40.2",
|
||||
"rollup-plugin-dotenv": "^0.5.1",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.71.0",
|
||||
"shelljs": "^0.9.2",
|
||||
"shelljs": "^0.10.0",
|
||||
"shx": "^0.4.0",
|
||||
"terser": "^5.39.0",
|
||||
"turbo": "^2.5.0"
|
||||
"terser": "^5.39.2",
|
||||
"turbo": "^2.5.3"
|
||||
}
|
||||
}
|
||||
7113
pnpm-lock.yaml
generated
7113
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
44
preview/CHANGELOG.md
Normal file
44
preview/CHANGELOG.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# @tabler/preview
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [446c34e]
|
||||
- @tabler/core@1.3.2
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a7f73d7]
|
||||
- @tabler/core@1.3.1
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 8850f61: Enhance pagination component with new styles
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
@@ -3,7 +3,7 @@ import { EleventyRenderPlugin } from "@11ty/eleventy";
|
||||
import { join } from 'node:path';
|
||||
import { sync } from 'glob';
|
||||
import { appFilters } from "../shared/e11ty/filters.mjs";
|
||||
import { appData, getCopyList } from "../shared/e11ty/data.mjs"
|
||||
import { appData } from "../shared/e11ty/data.mjs"
|
||||
|
||||
/** @type {import('@11ty/eleventy').LocalConfig} */
|
||||
export default function (eleventyConfig) {
|
||||
@@ -20,7 +20,7 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.setDataDirectory("../../shared/data");
|
||||
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
...getCopyList(),
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
"pages/favicon.ico": "favicon.ico",
|
||||
"static": "static",
|
||||
});
|
||||
@@ -33,11 +33,8 @@ export default function (eleventyConfig) {
|
||||
* Data
|
||||
*/
|
||||
eleventyConfig.addGlobalData("environment", environment);
|
||||
|
||||
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
|
||||
eleventyConfig.addGlobalData("readme", readFileSync(join("..", "README.md"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("license", readFileSync(join("..", "LICENSE"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
|
||||
|
||||
eleventyConfig.addGlobalData("pages", () => {
|
||||
return sync('pages/**/*.html').filter((file) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/preview",
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
||||
@@ -20,7 +20,7 @@
|
||||
"clean": "shx rm -rf dist demo",
|
||||
"html": "pnpm run html-build && pnpm run html-prettify",
|
||||
"html-build": "eleventy",
|
||||
"html-prettify": "prettier --write \"dist/**/*.html\"",
|
||||
"html-prettify": "prettier --write \"dist/**/*.html\" \"!dist/dist/**\"",
|
||||
"svg-optimize": "svgo -f svg/brand --pretty",
|
||||
"unused-files": "node .build/unused-files.mjs",
|
||||
"download-images": "node .build/download-images.mjs",
|
||||
@@ -30,35 +30,15 @@
|
||||
"import-icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.24.0",
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"countup.js": "^2.8.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.5.1",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.7",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"request": "^2.88.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0"
|
||||
},
|
||||
"prettier": {
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
|
||||
@@ -81,7 +81,7 @@ permalink: buttons.html
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,7 +91,7 @@ permalink: buttons.html
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon=true auto-columns=true %}
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ permalink: charts.html
|
||||
<div class="d-flex">
|
||||
<h3 class="card-title">Social referrals</h3>
|
||||
<div class="ms-auto">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
|
||||
|
||||
@@ -10,63 +10,97 @@ permalink: colors.html
|
||||
{% for color in site.colors %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% endfor %}
|
||||
{% assign colors = colors | push: 'dark' %}
|
||||
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table text-center">
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
|
||||
<div class="row g-3">
|
||||
{% for color in site.colors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.lightColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr class="bg-surface-tertiary">
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.grayColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr class="bg-dark text-white">
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
||||
<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr class="bg-dark text-white">
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
||||
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||
<div class="mt-2" data-demo-color-contrast></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.socialColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
{% include "ui/icon.html" icon=color[1].icon %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,7 +121,7 @@ permalink: colors.html
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">From</label>
|
||||
<select class="form-select" data-demo-color-select name="color-from">
|
||||
<select class="form-select" name="color-from">
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}">{{ color }}</option>
|
||||
{% endfor %}
|
||||
@@ -95,7 +129,7 @@ permalink: colors.html
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">To</label>
|
||||
<select class="form-select" data-demo-color-select name="color-to">
|
||||
<select class="form-select" name="color-to">
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
|
||||
{{ color }}
|
||||
@@ -107,7 +141,7 @@ permalink: colors.html
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">Via</label>
|
||||
<select class="form-select" data-demo-color-select name="color-via">
|
||||
<select class="form-select" name="color-via">
|
||||
<option></option>
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}">{{ color }}</option>
|
||||
@@ -116,7 +150,7 @@ permalink: colors.html
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Direction</label>
|
||||
<select class="form-select" data-demo-color-select name="color-direction">
|
||||
<select class="form-select" name="color-direction">
|
||||
<option value="to-t">to top</option>
|
||||
<option value="to-te">to top right</option>
|
||||
<option value="to-r" selected>to right</option>
|
||||
|
||||
@@ -13,13 +13,18 @@ permalink: faq.html
|
||||
{% assign categories-loop = forloop %}
|
||||
<div>
|
||||
<h2 class="mb-3">{{ categories-loop.index }}. {{ category.name }}</h2>
|
||||
<div id="faq-{{ categories-loop.index }}" class="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div id="faq-{{ categories-loop.index }}" class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
|
||||
{% for question in category.questions %}
|
||||
{% assign questions-loop = forloop %}
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-header{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
|
||||
<h4 class="accordion-header-text">{{ question.question }}</h4>
|
||||
</button>
|
||||
<div class="accordion-header">
|
||||
<button class="accordion-button{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
|
||||
{{ question.question }}
|
||||
<div class="accordion-button-toggle">
|
||||
{% include "ui/icon.html" icon="chevron-down" %}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="faq-{{ categories-loop.index }}-{{ questions-loop.index }}" class="accordion-collapse collapse{% if questions-loop.index == 1 %} show{% endif %}" role="tabpanel" data-bs-parent="#faq-{{ categories-loop.index }}">
|
||||
<div class="accordion-body pt-0">
|
||||
<div>
|
||||
|
||||
14
preview/pages/fullcalendar.html
Normal file
14
preview/pages/fullcalendar.html
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Fullcalendar
|
||||
page-header: Fullcalendar
|
||||
page-menu: plugins.fullcalendar
|
||||
layout: default
|
||||
permalink: fullcalendar.html
|
||||
page-libs: [fullcalendar]
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/fullcalendar.html" sample-events %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,8 +142,8 @@ permalink: illustrations.html
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
let skinColor = "{{ skin_color[1].hex }}",
|
||||
primaryColor = "{{ color[1].hex }}";
|
||||
let skinColor = "var({{ skin_color[1].prop }})",
|
||||
primaryColor = "var({{ color[1].prop }})";
|
||||
|
||||
const illustrations = {
|
||||
{% for illustration in free-illustrations.autodark %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Vector Maps
|
||||
page-header: Vector Maps
|
||||
page-menu: plugins.maps-vector
|
||||
page-libs: [jsvectormap, jsvectormap-world, jsvectormap-world-merc]
|
||||
page-libs: [jsvectormap]
|
||||
layout: default
|
||||
permalink: maps-vector.html
|
||||
---
|
||||
|
||||
@@ -8,7 +8,7 @@ permalink: marketing/real-estate.html
|
||||
<div class="container-narrow">
|
||||
<h1 class="hero-title text-white">Find your forever home</h1>
|
||||
<p class="hero-description mb-5 text-white text-opacity-50">It's time to find the home of your dreams, and you search begins here. We make it easy to find the property that fits your needs and budget.</p>
|
||||
<div class="row gx-5 justify-content-center">
|
||||
<div class="row gx-lg-5 justify-content-center">
|
||||
<div class="col-xl-6 col-lg-8 text-center">
|
||||
<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
|
||||
<div class="col flex-grow-1">
|
||||
@@ -25,7 +25,7 @@ permalink: marketing/real-estate.html
|
||||
<section class="section section-white">
|
||||
{% include "marketing/section-divider.html" divider="arc" %}
|
||||
<div class="container">
|
||||
<div class="row g-6">
|
||||
<div class="row g-lg-6">
|
||||
{% for building in real-estate %}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
|
||||
@@ -11,7 +11,7 @@ permalink: pagination.html
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/pagination.html" %}
|
||||
{% include "ui/pagination.html" icons=true %}
|
||||
{% include "ui/pagination.html" text=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
permalink: turbo-loader.html
|
||||
layout: default
|
||||
page-libs: [turbo]
|
||||
page-menu: plugins.turbo
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -4,7 +4,7 @@ page-header: HugeRTE
|
||||
menu: base.wysiwyg
|
||||
page-libs: [hugerte]
|
||||
permalink: /wysiwyg.html
|
||||
layout: single
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -1,4 +1,103 @@
|
||||
{
|
||||
"active-users-3": {
|
||||
"type": "radialBar",
|
||||
"height": 10,
|
||||
"sparkline": true,
|
||||
"series": [
|
||||
{
|
||||
"color": "primary",
|
||||
"data": 78
|
||||
}
|
||||
]
|
||||
},
|
||||
"visitors": {
|
||||
"type": "line",
|
||||
"height": 10,
|
||||
"sparkline": true,
|
||||
"datetime": true,
|
||||
"stroke-width": [
|
||||
2,
|
||||
1
|
||||
],
|
||||
"stroke-dash": [
|
||||
0,
|
||||
3
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "Visitors",
|
||||
"color": "primary",
|
||||
"data": [
|
||||
7687,
|
||||
7543,
|
||||
7545,
|
||||
7543,
|
||||
7635,
|
||||
8140,
|
||||
7810,
|
||||
8315,
|
||||
8379,
|
||||
8441,
|
||||
8485,
|
||||
8227,
|
||||
8906,
|
||||
8561,
|
||||
8333,
|
||||
8551,
|
||||
9305,
|
||||
9647,
|
||||
9359,
|
||||
9840,
|
||||
9805,
|
||||
8612,
|
||||
8970,
|
||||
8097,
|
||||
8070,
|
||||
9829,
|
||||
10545,
|
||||
10754,
|
||||
10270,
|
||||
9282
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Visitors last month",
|
||||
"color": "gray-400",
|
||||
"data": [
|
||||
8630,
|
||||
9389,
|
||||
8427,
|
||||
9669,
|
||||
8736,
|
||||
8261,
|
||||
8037,
|
||||
8922,
|
||||
9758,
|
||||
8592,
|
||||
8976,
|
||||
9459,
|
||||
8125,
|
||||
8528,
|
||||
8027,
|
||||
8256,
|
||||
8670,
|
||||
9384,
|
||||
9813,
|
||||
8425,
|
||||
8162,
|
||||
8024,
|
||||
8897,
|
||||
9284,
|
||||
8972,
|
||||
8776,
|
||||
8121,
|
||||
9476,
|
||||
8281,
|
||||
9065
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"active-users-2": {
|
||||
"type": "line",
|
||||
"height": 18,
|
||||
|
||||
@@ -250,9 +250,9 @@
|
||||
"title": "Inline player",
|
||||
"url": "docs/inline-player.html"
|
||||
},
|
||||
"tinymce": {
|
||||
"title": "TinyMCE",
|
||||
"url": "docs/tinymce.html"
|
||||
"wysiwyg": {
|
||||
"title": "WYSIWYG Editor",
|
||||
"url": "docs/wysiwyg.html"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"js": {
|
||||
"imask": "imask/dist/imask.min.js",
|
||||
"autosize": "autosize/dist/autosize.min.js",
|
||||
"apexcharts": "apexcharts/dist/apexcharts.min.js",
|
||||
"nouislider": "nouislider/dist/nouislider.min.js",
|
||||
"countup": "countup.js/dist/countUp.umd.js",
|
||||
"lists": "list.js/dist/list.min.js",
|
||||
"masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
|
||||
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
|
||||
"google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
|
||||
"litepicker": "litepicker/dist/litepicker.js",
|
||||
"tom-select": "tom-select/dist/js/tom-select.base.min.js",
|
||||
"jsvectormap": "jsvectormap/dist/jsvectormap.min.js",
|
||||
"jsvectormap-world": "jsvectormap/dist/maps/world.js",
|
||||
"jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
|
||||
"fslightbox": "fslightbox/index.js",
|
||||
"hugerte": "hugerte/hugerte.min.js",
|
||||
"plyr": "plyr/dist/plyr.min.js",
|
||||
"dropzone": "dropzone/dist/dropzone-min.js",
|
||||
"star-rating.js": "star-rating.js/dist/star-rating.min.js",
|
||||
"coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
|
||||
"typed.js": "typed.js/dist/typed.umd.js",
|
||||
"signature_pad": "signature_pad/dist/signature_pad.umd.min.js"
|
||||
},
|
||||
"js-head": {
|
||||
"turbo": "@hotwired/turbo/dist/turbo.es2017-umd.js"
|
||||
},
|
||||
"css": {
|
||||
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
|
||||
"jsvectormap": "jsvectormap/dist/jsvectormap.css",
|
||||
"dropzone": "dropzone/dist/dropzone.css",
|
||||
"plyr": "plyr/dist/plyr.css",
|
||||
"star-rating.js": "star-rating.js/dist/star-rating.min.css",
|
||||
"coloris.js": "@melloware/coloris/dist/coloris.min.css",
|
||||
"tom-select": "tom-select/dist/css/tom-select.bootstrap5.min.css",
|
||||
"nouislider": "nouislider/dist/nouislider.min.css"
|
||||
},
|
||||
"js-copy": {
|
||||
"hugerte" :"hugerte/*"
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,9 @@
|
||||
{
|
||||
"empty": {
|
||||
"title": "Empty map",
|
||||
"map": "world",
|
||||
"color": "primary"
|
||||
},
|
||||
"world": {
|
||||
"title": "World map",
|
||||
"map": "world",
|
||||
|
||||
@@ -410,6 +410,10 @@
|
||||
"title": "Dropzone",
|
||||
"url": "dropzone.html"
|
||||
},
|
||||
"fullcalendar": {
|
||||
"url": "fullcalendar.html",
|
||||
"title": "Fullcalendar"
|
||||
},
|
||||
"plyr": {
|
||||
"title": "Inline player",
|
||||
"url": "inline-player.html"
|
||||
@@ -430,6 +434,10 @@
|
||||
"url": "maps-vector.html",
|
||||
"title": "Map vector"
|
||||
},
|
||||
"turbo": {
|
||||
"url": "turbo-loader.html",
|
||||
"title": "Turbo loader"
|
||||
},
|
||||
"wysiwyg": {
|
||||
"url": "wysiwyg.html",
|
||||
"title": "WYSIWYG editor"
|
||||
|
||||
122
shared/data/open-source.json
Normal file
122
shared/data/open-source.json
Normal file
@@ -0,0 +1,122 @@
|
||||
[
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"url": "https://getbootstrap.com/",
|
||||
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "IMask",
|
||||
"url": "https://imask.js.org/",
|
||||
"description": "Vanilla JavaScript input masking library with support for various mask types and dynamic behavior.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Autosize",
|
||||
"url": "https://www.jacklmoore.com/autosize/",
|
||||
"description": "Automatically adjusts textarea height to fit text content.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "ApexCharts",
|
||||
"url": "https://apexcharts.com/",
|
||||
"description": "Modern charting library offering interactive and responsive charts.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "noUiSlider",
|
||||
"url": "https://refreshless.com/nouislider/",
|
||||
"description": "Lightweight JavaScript range slider with multi-touch support and extensive customization options.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "CountUp.js",
|
||||
"url": "https://inorganik.github.io/countUp.js/",
|
||||
"description": "Animates numerical values by counting up to them.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "List.js",
|
||||
"url": "https://listjs.com/",
|
||||
"description": "Adds search, sort, and flexibility to tables, lists, and various HTML elements.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Masonry",
|
||||
"url": "https://masonry.desandro.com/",
|
||||
"description": "JavaScript grid layout library that arranges elements optimally based on available vertical space.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Mapbox GL JS",
|
||||
"url": "https://docs.mapbox.com/mapbox-gl-js/",
|
||||
"description": "JavaScript library for interactive, customizable vector maps on the web.",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
{
|
||||
"name": "Litepicker",
|
||||
"url": "https://github.com/wakirin/Litepicker",
|
||||
"description": "Lightweight, no-dependency date range picker.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Tom Select",
|
||||
"url": "https://tom-select.js.org/",
|
||||
"description": "Dynamic and framework-agnostic <select> UI control with autocomplete and keyboard navigation.",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
{
|
||||
"name": "jsVectorMap",
|
||||
"url": "https://jvm-docs.vercel.app/",
|
||||
"description": "Lightweight JavaScript library for creating interactive maps and data visualizations.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Fslightbox",
|
||||
"url": "https://fslightbox.com/",
|
||||
"description": "Vanilla JavaScript plugin for displaying images and videos in a fullscreen lightbox.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "HugeRTE",
|
||||
"url": "https://hugerte.org/",
|
||||
"description": "MIT-licensed fork of TinyMCE, a web-based JavaScript HTML WYSIWYG editor control.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Plyr",
|
||||
"url": "https://plyr.io/",
|
||||
"description": "Simple, accessible, and customizable HTML5, YouTube, and Vimeo media player.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Dropzone",
|
||||
"url": "https://www.dropzone.dev/",
|
||||
"description": "Open-source library that provides drag-and-drop file uploads with image previews.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Star Rating.js",
|
||||
"url": "https://pryley.github.io/star-rating.js/",
|
||||
"description": "Lightweight JavaScript library for rendering star ratings.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Coloris",
|
||||
"url": "https://github.com/melloware/coloris-npm",
|
||||
"description": "Lightweight and elegant color picker written in vanilla JavaScript.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Typed.js",
|
||||
"url": "https://mattboldt.com/demos/typed-js/",
|
||||
"description": "JavaScript library that types out sentences in a human-like manner.",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"name": "Signature Pad",
|
||||
"url": "https://github.com/szimek/signature_pad",
|
||||
"description": "JavaScript library for drawing smooth signatures.",
|
||||
"license": "MIT"
|
||||
}
|
||||
]
|
||||
26
shared/data/package-managers.json
Normal file
26
shared/data/package-managers.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -7,10 +7,12 @@
|
||||
"homepage": "https://tabler.io",
|
||||
"githubUrl": "https://github.com/tabler/tabler",
|
||||
"githubSponsorsUrl": "https://github.com/sponsors/codecalm",
|
||||
"opencollectiveUrl": "https://opencollective.com/tabler",
|
||||
"xUrl": "https://x.com/tabler_io",
|
||||
"linkedinUrl": "https://www.linkedin.com/company/tabler-io",
|
||||
"changelogUrl": "https://github.com/tabler/tabler/releases",
|
||||
"sponsorUrl": "https://github.com/sponsors/codecalm",
|
||||
"previewUrl": "https://preview.tabler.io",
|
||||
"docsUrl": "https://tabler.io/docs",
|
||||
"docsUrl": "https://docs.tabler.io",
|
||||
"mapboxKey": "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
|
||||
"googleMapsKey": "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
|
||||
"googleMapsDevKey": "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
|
||||
@@ -38,125 +40,173 @@
|
||||
"colors": {
|
||||
"blue": {
|
||||
"class": "blue",
|
||||
"hex": "var(--tblr-blue)",
|
||||
"title": "Blue"
|
||||
"prop": "--tblr-blue",
|
||||
"title": "Blue",
|
||||
"hex": "#066fd1",
|
||||
"abbr": "bl"
|
||||
},
|
||||
"azure": {
|
||||
"class": "azure",
|
||||
"hex": "var(--tblr-azure)",
|
||||
"title": "Azure"
|
||||
"prop": "--tblr-azure",
|
||||
"title": "Azure",
|
||||
"hex": "#4299e1",
|
||||
"abbr": "az"
|
||||
},
|
||||
"indigo": {
|
||||
"class": "indigo",
|
||||
"hex": "var(--tblr-indigo)",
|
||||
"title": "Indigo"
|
||||
"prop": "--tblr-indigo",
|
||||
"title": "Indigo",
|
||||
"hex": "#4263eb",
|
||||
"abbr": "id"
|
||||
},
|
||||
"purple": {
|
||||
"class": "purple",
|
||||
"hex": "var(--tblr-purple)",
|
||||
"title": "Purple"
|
||||
"prop": "--tblr-purple",
|
||||
"title": "Purple",
|
||||
"hex": "#ae3ec9",
|
||||
"abbr": "pu"
|
||||
},
|
||||
"pink": {
|
||||
"class": "pink",
|
||||
"hex": "var(--tblr-pink)",
|
||||
"title": "Pink"
|
||||
"prop": "--tblr-pink",
|
||||
"title": "Pink",
|
||||
"hex": "#d6336c",
|
||||
"abbr": "pk"
|
||||
},
|
||||
"red": {
|
||||
"class": "red",
|
||||
"hex": "var(--tblr-red)",
|
||||
"title": "Red"
|
||||
"prop": "--tblr-red",
|
||||
"title": "Red",
|
||||
"hex": "#d63939",
|
||||
"abbr": "rd"
|
||||
},
|
||||
"orange": {
|
||||
"class": "orange",
|
||||
"hex": "var(--tblr-orange)",
|
||||
"title": "Orange"
|
||||
"prop": "--tblr-orange",
|
||||
"title": "Orange",
|
||||
"hex": "#f76707",
|
||||
"abbr": "or"
|
||||
},
|
||||
"yellow": {
|
||||
"class": "yellow",
|
||||
"hex": "var(--tblr-yellow)",
|
||||
"title": "Yellow"
|
||||
"prop": "--tblr-yellow",
|
||||
"title": "Yellow",
|
||||
"hex": "#f59f00",
|
||||
"abbr": "yl"
|
||||
},
|
||||
"lime": {
|
||||
"class": "lime",
|
||||
"hex": "var(--tblr-lime)",
|
||||
"title": "Lime"
|
||||
"prop": "--tblr-lime",
|
||||
"title": "Lime",
|
||||
"hex": "#74b816",
|
||||
"abbr": "lm"
|
||||
},
|
||||
"green": {
|
||||
"class": "green",
|
||||
"hex": "var(--tblr-green)",
|
||||
"title": "Green"
|
||||
"prop": "--tblr-green",
|
||||
"title": "Green",
|
||||
"hex": "#2fb344",
|
||||
"abbr": "gn"
|
||||
},
|
||||
"teal": {
|
||||
"class": "teal",
|
||||
"hex": "var(--tblr-teal)",
|
||||
"title": "Teal"
|
||||
"prop": "--tblr-teal",
|
||||
"title": "Teal",
|
||||
"hex": "#0ca678",
|
||||
"abbr": "tl"
|
||||
},
|
||||
"cyan": {
|
||||
"class": "cyan",
|
||||
"hex": "var(--tblr-cyan)",
|
||||
"title": "Cyan"
|
||||
"prop": "--tblr-cyan",
|
||||
"title": "Cyan",
|
||||
"hex": "#17a2b8",
|
||||
"abbr": "cy"
|
||||
}
|
||||
},
|
||||
"lightColors": {
|
||||
"blue": {
|
||||
"class": "blue",
|
||||
"hex": "var(--tblr-blue-lt)",
|
||||
"title": "Blue"
|
||||
"prop": "--tblr-blue-lt",
|
||||
"title": "Blue Light",
|
||||
"abbr": "bl",
|
||||
"hex": "#066fd1"
|
||||
},
|
||||
"azure": {
|
||||
"class": "azure",
|
||||
"hex": "var(--tblr-azure-lt)",
|
||||
"title": "Azure"
|
||||
"prop": "--tblr-azure-lt",
|
||||
"title": "Azure Light",
|
||||
"abbr": "az",
|
||||
"hex": "#4299e1"
|
||||
},
|
||||
"indigo": {
|
||||
"class": "indigo",
|
||||
"hex": "var(--tblr-indigo-lt)",
|
||||
"title": "Indigo"
|
||||
"prop": "--tblr-indigo-lt",
|
||||
"title": "Indigo Light",
|
||||
"abbr": "id",
|
||||
"hex": "#4263eb"
|
||||
},
|
||||
"purple": {
|
||||
"class": "purple",
|
||||
"hex": "var(--tblr-purple-lt)",
|
||||
"title": "Purple"
|
||||
"prop": "--tblr-purple-lt",
|
||||
"title": "Purple Light",
|
||||
"abbr": "pu",
|
||||
"hex": "#ae3ec9"
|
||||
},
|
||||
"pink": {
|
||||
"class": "pink",
|
||||
"hex": "var(--tblr-pink-lt)",
|
||||
"title": "Pink"
|
||||
"prop": "--tblr-pink-lt",
|
||||
"title": "Pink Light",
|
||||
"abbr": "pk",
|
||||
"hex": "#d6336c"
|
||||
},
|
||||
"red": {
|
||||
"class": "red",
|
||||
"hex": "var(--tblr-red-lt)",
|
||||
"title": "Red"
|
||||
"prop": "--tblr-red-lt",
|
||||
"title": "Red Light",
|
||||
"abbr": "rd",
|
||||
"hex": "#d63939"
|
||||
},
|
||||
"orange": {
|
||||
"class": "orange",
|
||||
"hex": "var(--tblr-orange-lt)",
|
||||
"title": "Orange"
|
||||
"prop": "--tblr-orange-lt",
|
||||
"title": "Orange Light",
|
||||
"abbr": "or",
|
||||
"hex": "#f76707"
|
||||
},
|
||||
"yellow": {
|
||||
"class": "yellow",
|
||||
"hex": "var(--tblr-yellow-lt)",
|
||||
"title": "Yellow"
|
||||
"prop": "--tblr-yellow-lt",
|
||||
"title": "Yellow Light",
|
||||
"abbr": "yl",
|
||||
"hex": "#f59f00"
|
||||
},
|
||||
"lime": {
|
||||
"class": "lime",
|
||||
"hex": "var(--tblr-lime-lt)",
|
||||
"title": "Lime"
|
||||
"prop": "--tblr-lime-lt",
|
||||
"title": "Lime Light",
|
||||
"abbr": "lm",
|
||||
"hex": "#74b816"
|
||||
},
|
||||
"green": {
|
||||
"class": "green",
|
||||
"hex": "var(--tblr-green-lt)",
|
||||
"title": "Green"
|
||||
"prop": "--tblr-green-lt",
|
||||
"title": "Green Light",
|
||||
"abbr": "gn",
|
||||
"hex": "#2fb344"
|
||||
},
|
||||
"teal": {
|
||||
"class": "teal",
|
||||
"hex": "var(--tblr-teal-lt)",
|
||||
"title": "Teal"
|
||||
"prop": "--tblr-teal-lt",
|
||||
"title": "Teal Light",
|
||||
"abbr": "tl",
|
||||
"hex": "#0ca678"
|
||||
},
|
||||
"cyan": {
|
||||
"class": "cyan",
|
||||
"hex": "var(--tblr-cyan-lt)",
|
||||
"title": "Cyan"
|
||||
"prop": "--tblr-cyan-lt",
|
||||
"title": "Cyan Light",
|
||||
"abbr": "cy",
|
||||
"hex": "#17a2b8"
|
||||
}
|
||||
},
|
||||
"skinColors": {
|
||||
@@ -204,123 +254,200 @@
|
||||
"socialColors": {
|
||||
"facebook": {
|
||||
"title": "Facebook",
|
||||
"hex": "#1877F2"
|
||||
"hex": "var(--tblr-facebook)",
|
||||
"abbr": "fb",
|
||||
"icon": "brand-facebook",
|
||||
"prop": "--tblr-facebook"
|
||||
},
|
||||
"twitter": {
|
||||
"title": "Twitter",
|
||||
"hex": "#1da1f2"
|
||||
"hex": "var(--tblr-twitter)",
|
||||
"abbr": "tw",
|
||||
"icon": "brand-twitter",
|
||||
"prop": "--tblr-twitter"
|
||||
},
|
||||
"x": {
|
||||
"title": "X",
|
||||
"hex": "var(--tblr-x)",
|
||||
"abbr": "x",
|
||||
"icon": "brand-x",
|
||||
"prop": "--tblr-x"
|
||||
},
|
||||
"linkedin": {
|
||||
"title": "Linkedin",
|
||||
"hex": "#0a66c2"
|
||||
"hex": "var(--tblr-linkedin)",
|
||||
"abbr": "li",
|
||||
"icon": "brand-linkedin",
|
||||
"prop": "--tblr-linkedin"
|
||||
},
|
||||
"google": {
|
||||
"title": "Google",
|
||||
"hex": "#dc4e41"
|
||||
"hex": "var(--tblr-google)",
|
||||
"abbr": "go",
|
||||
"icon": "brand-google",
|
||||
"prop": "--tblr-google"
|
||||
},
|
||||
"youtube": {
|
||||
"title": "Youtube",
|
||||
"hex": "#ff0000"
|
||||
"hex": "var(--tblr-youtube)",
|
||||
"abbr": "yt",
|
||||
"icon": "brand-youtube",
|
||||
"prop": "--tblr-youtube"
|
||||
},
|
||||
"vimeo": {
|
||||
"title": "Vimeo",
|
||||
"hex": "#1ab7ea"
|
||||
"hex": "var(--tblr-vimeo)",
|
||||
"abbr": "vi",
|
||||
"icon": "brand-vimeo",
|
||||
"prop": "--tblr-vimeo"
|
||||
},
|
||||
"dribbble": {
|
||||
"title": "Dribbble",
|
||||
"hex": "#ea4c89"
|
||||
"hex": "var(--tblr-dribbble)",
|
||||
"abbr": "dr",
|
||||
"icon": "brand-dribbble",
|
||||
"prop": "--tblr-dribbble"
|
||||
},
|
||||
"github": {
|
||||
"title": "Github",
|
||||
"hex": "#181717"
|
||||
"hex": "var(--tblr-github)",
|
||||
"abbr": "gh",
|
||||
"icon": "brand-github",
|
||||
"prop": "--tblr-github"
|
||||
},
|
||||
"instagram": {
|
||||
"title": "Instagram",
|
||||
"hex": "#e4405f"
|
||||
"hex": "var(--tblr-instagram)",
|
||||
"abbr": "ig",
|
||||
"icon": "brand-instagram",
|
||||
"prop": "--tblr-instagram"
|
||||
},
|
||||
"pinterest": {
|
||||
"title": "Pinterest",
|
||||
"hex": "#bd081c"
|
||||
"hex": "var(--tblr-pinterest)",
|
||||
"abbr": "pt",
|
||||
"icon": "brand-pinterest",
|
||||
"prop": "--tblr-pinterest"
|
||||
},
|
||||
"vk": {
|
||||
"title": "VK",
|
||||
"hex": "#6383a8"
|
||||
"hex": "var(--tblr-vk)",
|
||||
"abbr": "vk",
|
||||
"icon": "brand-vk",
|
||||
"prop": "--tblr-vk"
|
||||
},
|
||||
"rss": {
|
||||
"title": "RSS",
|
||||
"hex": "#ffa500"
|
||||
"hex": "var(--tblr-rss)",
|
||||
"abbr": "rs",
|
||||
"icon": "rss",
|
||||
"prop": "--tblr-rss"
|
||||
},
|
||||
"flickr": {
|
||||
"title": "Flickr",
|
||||
"hex": "#0063dc"
|
||||
"hex": "var(--tblr-flickr)",
|
||||
"abbr": "fl",
|
||||
"icon": "brand-flickr",
|
||||
"prop": "--tblr-flickr"
|
||||
},
|
||||
"bitbucket": {
|
||||
"title": "Bitbucket",
|
||||
"hex": "#0052cc"
|
||||
"hex": "var(--tblr-bitbucket)",
|
||||
"abbr": "bb",
|
||||
"icon": "brand-bitbucket",
|
||||
"prop": "--tblr-bitbucket"
|
||||
},
|
||||
"tabler": {
|
||||
"title": "Tabler",
|
||||
"hex": "#066fd1"
|
||||
"hex": "var(--tblr-tabler)",
|
||||
"abbr": "tb",
|
||||
"icon": "brand-tabler",
|
||||
"prop": "--tblr-tabler"
|
||||
}
|
||||
},
|
||||
"grayColors": {
|
||||
"gray-50": {
|
||||
"hex": "#f9fafb",
|
||||
"title": "Gray 50"
|
||||
"hex": "var(--tblr-gray-50)",
|
||||
"title": "Gray 50",
|
||||
"prop": "--tblr-gray-50",
|
||||
"abbr": "50"
|
||||
},
|
||||
"gray-100": {
|
||||
"hex": "#f3f4f6",
|
||||
"title": "Gray 100"
|
||||
"hex": "var(--tblr-gray-100)",
|
||||
"title": "Gray 100",
|
||||
"prop": "--tblr-gray-100",
|
||||
"abbr": "100"
|
||||
},
|
||||
"gray-200": {
|
||||
"hex": "#e5e7eb",
|
||||
"title": "Gray 200"
|
||||
"hex": "var(--tblr-gray-200)",
|
||||
"title": "Gray 200",
|
||||
"prop": "--tblr-gray-200",
|
||||
"abbr": "200"
|
||||
},
|
||||
"gray-300": {
|
||||
"hex": "#d1d5db",
|
||||
"title": "Gray 300"
|
||||
"hex": "var(--tblr-gray-300)",
|
||||
"title": "Gray 300",
|
||||
"prop": "--tblr-gray-300",
|
||||
"abbr": "300"
|
||||
},
|
||||
"gray-400": {
|
||||
"hex": "#9ca3af",
|
||||
"title": "Gray 400"
|
||||
"hex": "var(--tblr-gray-400)",
|
||||
"title": "Gray 400",
|
||||
"prop": "--tblr-gray-400",
|
||||
"abbr": "400"
|
||||
},
|
||||
"gray-500": {
|
||||
"hex": "#6b7280",
|
||||
"title": "Gray 500"
|
||||
"hex": "var(--tblr-gray-500)",
|
||||
"title": "Gray 500",
|
||||
"prop": "--tblr-gray-500",
|
||||
"abbr": "500"
|
||||
},
|
||||
"gray-600": {
|
||||
"hex": "#4b5563",
|
||||
"title": "Gray 600"
|
||||
"hex": "var(--tblr-gray-600)",
|
||||
"title": "Gray 600",
|
||||
"prop": "--tblr-gray-600",
|
||||
"abbr": "600"
|
||||
},
|
||||
"gray-700": {
|
||||
"hex": "#374151",
|
||||
"title": "Gray 700"
|
||||
"hex": "var(--tblr-gray-700)",
|
||||
"title": "Gray 700",
|
||||
"prop": "--tblr-gray-700",
|
||||
"abbr": "700"
|
||||
},
|
||||
"gray-800": {
|
||||
"hex": "#1f2937",
|
||||
"title": "Gray 800"
|
||||
"hex": "var(--tblr-gray-800)",
|
||||
"title": "Gray 800",
|
||||
"prop": "--tblr-gray-800",
|
||||
"abbr": "800"
|
||||
},
|
||||
"gray-900": {
|
||||
"hex": "#111827",
|
||||
"title": "Gray 900"
|
||||
"hex": "var(--tblr-gray-900)",
|
||||
"title": "Gray 900",
|
||||
"prop": "--tblr-gray-900",
|
||||
"abbr": "900"
|
||||
},
|
||||
"gray-950": {
|
||||
"hex": "#030712",
|
||||
"title": "Gray 950"
|
||||
"hex": "var(--tblr-gray-950)",
|
||||
"title": "Gray 950",
|
||||
"prop": "--tblr-gray-950",
|
||||
"abbr": "950"
|
||||
}
|
||||
},
|
||||
"colorsExtra": {
|
||||
"white": {
|
||||
"hex": "#ffffff",
|
||||
"title": "White"
|
||||
"title": "White",
|
||||
"prop": "--tblr-white"
|
||||
},
|
||||
"dark": {
|
||||
"hex": "#303645",
|
||||
"title": "Dark"
|
||||
"title": "Dark",
|
||||
"prop": "--tblr-dark"
|
||||
},
|
||||
"gray": {
|
||||
"hex": "#868e96",
|
||||
"title": "Gray"
|
||||
"title": "Gray",
|
||||
"prop": "--tblr-gray"
|
||||
}
|
||||
},
|
||||
"variants": [
|
||||
@@ -389,68 +516,6 @@
|
||||
"title": "Disabled"
|
||||
}
|
||||
],
|
||||
"socials": {
|
||||
"x": {
|
||||
"icon": "brand-x",
|
||||
"title": "X"
|
||||
},
|
||||
"facebook": {
|
||||
"icon": "brand-facebook",
|
||||
"title": "Facebook"
|
||||
},
|
||||
"twitter": {
|
||||
"icon": "brand-twitter",
|
||||
"title": "Twitter"
|
||||
},
|
||||
"google": {
|
||||
"icon": "brand-google",
|
||||
"title": "Google"
|
||||
},
|
||||
"youtube": {
|
||||
"icon": "brand-youtube",
|
||||
"title": "Youtube"
|
||||
},
|
||||
"vimeo": {
|
||||
"icon": "brand-vimeo",
|
||||
"title": "Vimeo"
|
||||
},
|
||||
"dribbble": {
|
||||
"icon": "brand-dribbble",
|
||||
"title": "Dribbble"
|
||||
},
|
||||
"github": {
|
||||
"icon": "brand-github",
|
||||
"title": "Github"
|
||||
},
|
||||
"instagram": {
|
||||
"icon": "brand-instagram",
|
||||
"title": "Instagram"
|
||||
},
|
||||
"pinterest": {
|
||||
"icon": "brand-pinterest",
|
||||
"title": "Pinterest"
|
||||
},
|
||||
"vk": {
|
||||
"icon": "brand-vk",
|
||||
"title": "VK"
|
||||
},
|
||||
"rss": {
|
||||
"icon": "rss",
|
||||
"title": "RSS"
|
||||
},
|
||||
"flickr": {
|
||||
"icon": "brand-flickr",
|
||||
"title": "Flickr"
|
||||
},
|
||||
"bitbucket": {
|
||||
"icon": "brand-bitbucket",
|
||||
"title": "Bitbucket"
|
||||
},
|
||||
"tabler": {
|
||||
"icon": "brand-tabler",
|
||||
"title": "Tabler"
|
||||
}
|
||||
},
|
||||
"months-short": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"css": "sha384-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc",
|
||||
"css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb",
|
||||
"css": "sha384-p5xrK2AiivdjrNPtu162Vv179cyFHJY2I4Mb0NZVR8Wn2aqSGUm7zlFFjM8jAzeD",
|
||||
"css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
|
||||
"css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
|
||||
"css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
|
||||
"css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
|
||||
@@ -9,13 +9,13 @@
|
||||
"css-payments-rtl": "sha384-TI7r4R+53giBkEHQMbhBrUTK58fdyoNij2PR7ICQkIt9W3fW9aXoknm9oqyyU0TK",
|
||||
"css-socials": "sha384-rYtfgzcCz11iyODxSKx70JwR+bSIYiIcjSzvRMppIC/s3uSfW787ZBJpOI9mk2VD",
|
||||
"css-socials-rtl": "sha384-UpQExKWGunZHqL3L6jEETXHpj5JWIxk8bhxJJmAr8FP/hTUojs4GMCg7omu2DJ5n",
|
||||
"css-props": "sha384-t5AFxZYwektpmm9yFkYyQnqmRznM0j2ePqtQkc6A0kNEZUk2LoBEeD9b0PvJHYxm",
|
||||
"css-props-rtl": "sha384-6txSzETjcUyidhwqyX6qetyeL/cC8i08pABY76WvJ8/vyFKvHmWFPTLK7j420MO/",
|
||||
"css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
|
||||
"css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
|
||||
"css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
|
||||
"css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
|
||||
"css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC",
|
||||
"css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh",
|
||||
"js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT",
|
||||
"css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
|
||||
"css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
|
||||
"js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
|
||||
"js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
|
||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||
|
||||
@@ -1,41 +1,8 @@
|
||||
import { readFileSync } from "fs";
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { join } from "path";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export function getCopyList () {
|
||||
let copy = {
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
}
|
||||
|
||||
const libs = JSON.parse(readFileSync(join(__dirname, '../data/libs.json')));
|
||||
|
||||
let files = []
|
||||
|
||||
Object.keys(libs.js).forEach((lib) => {
|
||||
files.push(Array.isArray(libs.js[lib]) ? libs.js[lib] : [libs.js[lib]])
|
||||
})
|
||||
|
||||
Object.keys(libs.css).forEach((lib) => {
|
||||
files.push(Array.isArray(libs.css[lib]) ? libs.css[lib] : [libs.css[lib]])
|
||||
})
|
||||
|
||||
Object.keys(libs['js-copy']).forEach((lib) => {
|
||||
files.push(libs['js-copy'][lib])
|
||||
})
|
||||
|
||||
files = files.flat()
|
||||
|
||||
files.forEach((file) => {
|
||||
if (!file.match(/^https?/)) {
|
||||
copy[`node_modules/${dirname(file)}`] = `libs/${dirname(file)}`;
|
||||
}
|
||||
})
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
export function appData(eleventyConfig) {
|
||||
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
|
||||
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
|
||||
}
|
||||
@@ -34,6 +34,17 @@ export function appFilters(eleventyConfig) {
|
||||
}
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("escape_attribute", (text) => {
|
||||
return text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/\r\n/g, ' ')
|
||||
.replace(/[\r\n]/g, ' ');
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("contains", (items, item) => {
|
||||
return items && Array.isArray(items) && items.includes(item);
|
||||
});
|
||||
@@ -149,7 +160,6 @@ export function appFilters(eleventyConfig) {
|
||||
|
||||
// Convert a URL path to an absolute URL
|
||||
eleventyConfig.addFilter("absolute_url", function (url) {
|
||||
// Base URL for the site - change this to your production domain
|
||||
const baseUrl = "https://docs.tabler.io";
|
||||
|
||||
// Ensure url starts with a slash
|
||||
@@ -259,4 +269,6 @@ export function appFilters(eleventyConfig) {
|
||||
|
||||
return '';
|
||||
})
|
||||
|
||||
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Active users</div>
|
||||
<div class="subheader">Active subscriptions</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">New clients</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
{% include "parts/dropdown/days.html" id="new-clients" label="Select time range for new clients" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Revenue</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
{% include "parts/dropdown/days.html" id="revenue" label="Select time range for revenue" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="subheader">Sales</div>
|
||||
<div class="ms-auto lh-1">
|
||||
{% include "parts/dropdown/days.html" %}
|
||||
{% include "parts/dropdown/days.html" id="sales" label="Select time range for sales data" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h1 mb-3">75%</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user