Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 09:24:24 +04:00
Code Issues Projects Releases Wiki Activity

Add Prettier to project for consistent code formatting (#1558)

Browse Source
This commit is contained in:
Paweł Kuna
2023-05-10 02:14:46 +02:00
committed by GitHub
parent 18a77046ea
commit 289dd3bd09
19 changed files with 1014 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/thick-apples-punch.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Add Prettier to project for consistent code formatting

5
.prettierignore Normal file
View File

@@ -0,0 +1,5 @@
dist
.tmp
.vscode
.cache
node_modules

10
.prettierrc Normal file
View File

@@ -0,0 +1,10 @@
{
"bracketSpacing": true,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all"
}

997
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -20,7 +20,9 @@
"changelog": "gulp changelog",
"icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
"download-images": "node build/download-images.js",
"optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
"optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
"format:check": "prettier --check src/**/*.{js,scss} --cache",
"format:write": "prettier --write src/**/*.{js,scss} --cache"
},
"repository": {
"type": "git",
@@ -130,11 +132,13 @@
"devDependencies": {
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@changesets/cli": "^2.26.1",
"@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-replace": "^5.0.2",
"@rollup/pluginutils": "^5.0.2",
"@rollup/stream": "^2.0.0",
"@shopify/prettier-plugin-liquid": "^1.0.6",
"@tabler/icons": "^2.17.0",
"all-contributors-cli": "^6.25.0",
"apexcharts": "^3.40.0",
@@ -168,6 +172,7 @@
"nouislider": "^15.7.0",
"plyr": "^3.7.8",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"release-it": "^15.10.3",
"request": "^2.88.2",
"rollup": "2.79.1",
@@ -182,7 +187,6 @@
"yargs": "^17.7.2"
},
"dependencies": {
"@changesets/cli": "^2.26.1",
"@popperjs/core": "^2.11.7",
"bootstrap": "5.3.0-alpha3"
},

10
src/js/demo-theme.js
View File

@@ -4,14 +4,14 @@
* This will prevent any flashes of the light theme (default) before switching.
*/
const themeStorageKey = 'tablerTheme'
const defaultTheme = 'light'
const themeStorageKey = "tablerTheme"
const defaultTheme = "light"
let selectedTheme
// https://stackoverflow.com/a/901144
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
})
if (!!params.theme) {
localStorage.setItem(themeStorageKey, params.theme)
@@ -21,5 +21,5 @@ if (!!params.theme) {
selectedTheme = storedTheme ? storedTheme : defaultTheme
}
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.add(`theme-${selectedTheme}`);
document.body.classList.remove("theme-dark", "theme-light")
document.body.classList.add(`theme-${selectedTheme}`)

27
src/js/demo.js
View File

@@ -1,8 +1,11 @@
// Setting items
const items = {
'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
"container-layout": {
localStorage: "tablerContainerLayout",
default: "boxed",
},
}
// Theme config
@@ -15,10 +18,10 @@ for (const [key, params] of Object.entries(items)) {
// Parse url params
const parseUrl = () => {
const search = window.location.search.substring(1)
const params = search.split('&')
const params = search.split("&")
for (let i = 0; i < params.length; i++) {
const arr = params[i].split('=')
const arr = params[i].split("=")
const key = arr[0]
const value = arr[1]
@@ -35,7 +38,9 @@ const parseUrl = () => {
// Toggle form controls
const toggleFormControls = (form) => {
for (const [key, params] of Object.entries(items)) {
const elem = form.querySelector(`[name="settings-${key}"][value="${config[key]}"]`)
const elem = form.querySelector(
`[name="settings-${key}"][value="${config[key]}"]`,
)
if (elem) {
elem.checked = true
@@ -55,22 +60,20 @@ const submitForm = (form) => {
config[key] = value
}
window.dispatchEvent(new Event('resize'));
window.dispatchEvent(new Event("resize"))
(new bootstrap.Offcanvas(form)).hide()
new bootstrap.Offcanvas(form).hide()
}
// Parse url
parseUrl()
// Elements
const form = document.querySelector('#offcanvasSettings')
const form = document.querySelector("#offcanvasSettings")
// Toggle form controls
if (form) {
form.addEventListener('submit', function (e) {
form.addEventListener("submit", function (e) {
e.preventDefault()
submitForm(form)

15
src/js/tabler.esm.js
View File

@@ -1,10 +1,9 @@
//Vendor
import './src/autosize';
import './src/input-mask';
import './src/dropdown';
import './src/tooltip';
import './src/popover';
import './src/switch-icon';
import './src/toast';
import "./src/autosize"
import "./src/input-mask"
import "./src/dropdown"
import "./src/tooltip"
import "./src/popover"
import "./src/switch-icon"
import "./src/toast"

24
src/js/tabler.js
View File

@@ -1,15 +1,15 @@
//Vendor
import './src/autosize';
import './src/input-mask';
import './src/dropdown';
import './src/tooltip';
import './src/popover';
import './src/switch-icon';
import './src/tab';
import './src/toast';
import * as bootstrap from 'bootstrap';
import * as tabler from './src/tabler';
import "./src/autosize"
import "./src/input-mask"
import "./src/dropdown"
import "./src/tooltip"
import "./src/popover"
import "./src/switch-icon"
import "./src/tab"
import "./src/toast"
import * as bootstrap from "bootstrap"
import * as tabler from "./src/tabler"
globalThis.bootstrap = bootstrap;
globalThis.tabler = tabler;
globalThis.bootstrap = bootstrap
globalThis.tabler = tabler

18
src/scss/_bootstrap-override.scss
View File

@@ -1,8 +1,8 @@
@mixin caret($direction: down) {
$selector: 'after';
$selector: "after";
@if $direction == 'left' {
$selector: 'before'
@if $direction == "left" {
$selector: "before";
}
&:#{$selector} {
@@ -13,9 +13,9 @@
height: $caret-width;
border-bottom: 1px var(--#{$prefix}border-style);
border-left: 1px var(--#{$prefix}border-style);
margin-right: .1em;
margin-right: 0.1em;
@if $direction != 'left' {
@if $direction != "left" {
margin-left: $caret-spacing;
} @else {
margin-right: $caret-spacing;
@@ -32,18 +32,14 @@
}
}
@if $direction == 'left' {
@if $direction == "left" {
&:after {
content: none;
}
}
}
@mixin alert-variant(
$background: null,
$border: null,
$color: null
) {
@mixin alert-variant($background: null, $border: null, $color: null) {
// Override bootstrap core
}

17
src/scss/_debug.scss
View File

@@ -1,7 +1,20 @@
$debug: false;
@if $debug {
$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "lime": $lime, "green": $green, "teal": $teal, "cyan": $cyan);
$colors: (
"blue": $blue,
"azure": $azure,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"lime": $lime,
"green": $green,
"teal": $teal,
"cyan": $cyan,
);
@each $name, $color in $colors {
@debug ("#{$name}: '#{$color}'");
@@ -34,5 +47,3 @@ $debug: false;
@debug ("#{$name}: '#{$color}'");
}
}

38
src/scss/_utilities.scss
View File

@@ -1,6 +1,8 @@
$border-values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
$border-color-translucent,
wide: $border-width-wide var(--#{$prefix}border-style)
$border-color-translucent,
0: 0,
);
@@ -15,16 +17,16 @@ $utilities: (
fill: fill,
scale-down: scale-down,
none: none,
)
),
),
"spacing": (
property: letter-spacing,
class: tracking,
values: (
tight: -.05em,
tight: -0.05em,
normal: 0,
wide: .05em,
)
wide: 0.05em,
),
),
"cursor": (
property: cursor,
@@ -45,54 +47,54 @@ $utilities: (
v-text: vertical-text,
grab: grab,
grabbing: grabbing,
)
),
),
"border": (
property: border,
values: $border-values
values: $border-values,
),
"border-top": (
property: border-top,
values: $border-values
values: $border-values,
),
"border-end": (
class: border-end,
property: border-right,
values: $border-values
values: $border-values,
),
"border-bottom": (
property: border-bottom,
values: $border-values
values: $border-values,
),
"border-start": (
class: border-start,
property: border-left,
values: $border-values
values: $border-values,
),
"border-x": (
class: border-x,
property: border-left border-right,
values: $border-values
values: $border-values,
),
"border-y": (
class: border-y,
property: border-top border-bottom,
values: $border-values
values: $border-values,
),
"width": (
property: width,
class: w,
values: $size-values
values: $size-values,
),
"height": (
property: height,
class: h,
values: $size-values
values: $size-values,
),
"columns": (
property: columns,
class: columns,
responsive: true,
values: 2 3 4
)
values: 2 3 4,
),
) !default;

2
src/scss/_variables.scss
View File

@@ -20,7 +20,9 @@ $font-google-monospaced: null !default;
$font-local: null !default;
$font-icons: () !default;
/* prettier-ignore */
$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
/* prettier-ignore */
$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;

43
src/scss/demo.scss
View File

@@ -1,10 +1,7 @@
@import "config";
@import "demo/highlight";
@import "demo/examples";
.card-sponsor {
background: #dbe7f6 no-repeat center/100% 100%;
border-color: #548ed2;
@@ -15,7 +12,6 @@ body.no-transitions * {
transition: none !important;
}
.dropdown-menu-demo {
display: inline-block;
width: 100%;
@@ -54,12 +50,11 @@ body.no-transitions * {
.demo-dividers {
> p {
opacity: .2;
opacity: 0.2;
user-select: none;
}
}
$demo-icon-size: 4rem;
.demo-icons-list {
display: flex;
@@ -84,9 +79,11 @@ $demo-icon-size: 4rem;
justify-content: center;
aspect-ratio: 1;
text-align: center;
padding: .5rem;
border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding: 0.5rem;
border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color);
color: inherit;
cursor: pointer;
@@ -101,7 +98,6 @@ $demo-icon-size: 4rem;
}
}
//
// Settings
//
@@ -121,12 +117,27 @@ $demo-icon-size: 4rem;
height: 3rem;
width: 3rem;
position: relative;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color);
box-shadow: $shadow;
&-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
&-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
&-transparent { background: $light; }
&-dark { background: $dark; }
&-colored { background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%); }
&-light {
background: linear-gradient(135deg, $white 50%, $light 50%);
}
&-mixed {
background-image: linear-gradient(135deg, $dark 50%, #fff 50%);
}
&-transparent {
background: $light;
}
&-dark {
background: $dark;
}
&-colored {
background-image: linear-gradient(
135deg,
var(--#{$prefix}primary) 50%,
$light 50%
);
}
}

1
src/scss/tabler-social.scss
View File

@@ -1,2 +1 @@
@import "config";

1
src/scss/tabler.scss
View File

@@ -1,2 +1 @@
@import "core";