@tabler/core 1.0.0-beta5 → 1.0.0-beta6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta6",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "gulp start",
@@ -55,23 +55,20 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/pluginutils": "^4.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/pluginutils": "^4.1.2",
     "@rollup/stream": "^2.0.0",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/html": "^6.3.12",
-    "apexcharts": "^3.29.0",
-    "autoprefixer": "^10.3.7",
+    "apexcharts": "^3.33.0",
+    "autoprefixer": "^10.4.2",
     "autosize": "^5.0.1",
-    "browser-sync": "^2.27.5",
-    "bundlewatch": "^0.3.2",
-    "choices.js": "^9.0.1",
-    "chromatic": "^6.0.5",
+    "browser-sync": "^2.27.7",
+    "bundlewatch": "^0.3.3",
+    "choices.js": "^10.0.0",
+    "chromatic": "^6.4.0",
     "countup.js": "^2.0.8",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
@@ -79,45 +76,46 @@
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
-    "gulp-debug": "^4.0.0",
+    "gulp-debug": "^3.2.0",
     "gulp-header": "^2.0.9",
     "gulp-minify": "^3.1.0",
     "gulp-postcss": "^9.0.1",
-    "gulp-purgecss": "^4.0.3",
+    "gulp-purgecss": "^4.1.3",
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^1.4.2",
-    "gulp-sass": "^5.0.0",
+    "gulp-sass": "^5.1.0",
     "imask": "^6.2.2",
-    "litepicker": "^2.0.11",
-    "node-sass": "^6.0.1",
+    "jsvectormap": "^1.4.2",
+    "litepicker": "^2.0.12",
     "nouislider": "^15.5.0",
-    "postcss": "^8.3.11",
-    "release-it": "^14.11.6",
-    "rollup": "^2.58.0",
+    "postcss": "^8.4.5",
+    "release-it": "^14.12.3",
+    "rollup": "^2.64.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "storybook-addon-outline": "^1.4.1",
-    "tom-select": "^1.7.8",
+    "sass": "^1.48.0",
+    "tom-select": "^2.0.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^1.10.2",
-    "yargs": "^17.2.1"
+    "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@popperjs/core": "^2.10.2",
-    "@tabler/icons": "^1.44.0",
+    "@popperjs/core": "^2.11.2",
+    "@tabler/icons": "^1.53.0",
     "bootstrap": "5.1.3"
   },
   "peerDependencies": {
-    "apexcharts": "^3.29.0",
+    "apexcharts": "^3.33.0",
     "autosize": "^5.0.1",
-    "choices.js": "^9.0.1",
+    "choices.js": "^10.0.0",
     "countup.js": "^2.0.8",
     "flatpickr": "^4.6.9",
     "imask": "^6.2.2",
-    "litepicker": "^2.0.11",
+    "jsvectormap": "^1.4.2",
+    "litepicker": "^2.0.12",
     "nouislider": "^15.5.0",
-    "tom-select": "^1.7.8"
+    "tom-select": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "apexcharts": {
@@ -146,6 +144,9 @@
     },
     "tom-select": {
       "optional": true
+    },
+    "jsvectormap": {
+      "optional": true
     }
   },
   "resolutions": {

package/src/js/src/tab.js

@@ -12,3 +12,5 @@ export const EnableActivationTabsFromLocationHash = () => {
 	 });
   }
 }
+
+EnableActivationTabsFromLocationHash()

package/src/js/tabler.js

@@ -6,10 +6,8 @@ import './src/dropdown';
 import './src/tooltip';
 import './src/popover';
 import './src/switch-icon';
-import { EnableActivationTabsFromLocationHash } from './src/tab';
+import './src/tab';
 import './src/toast';
 import * as bootstrap from 'bootstrap';
 
 window.bootstrap = bootstrap;
-
-EnableActivationTabsFromLocationHash();

package/src/scss/_core.scss

@@ -43,8 +43,9 @@
 @import "ui/progress";
 @import "ui/ribbons";
 @import "ui/markdown";
-@import "ui/skeleton";
+@import "ui/placeholder";
 @import "ui/steps";
+@import "ui/status";
 @import "ui/switch-icon";
 @import "ui/tables";
 @import "ui/toasts";

package/src/scss/_utilities.scss

@@ -49,27 +49,6 @@ $utilities: (
       grabbing: grabbing,
     )
   ),
-  "font-size": (
-    property: font-size,
-    class: text,
-    values: (
-      h1: $h1-font-size,
-      h2: $h2-font-size,
-      h3: $h3-font-size,
-      h4: $h4-font-size,
-      h5: $h5-font-size,
-      h6: $h6-font-size,
-    )
-  ),
-  "font-weight": (
-    property: font-weight,
-    values: (
-      light: $font-weight-light,
-      normal: $font-weight-normal,
-      medium: $font-weight-medium,
-      bold: $font-weight-bold,
-    )
-  ),
   "border": (
     property: border,
     values: $border-values

package/src/scss/_variables.scss

@@ -7,6 +7,7 @@ $enable-gradients: false !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
+$enable-rfs: false !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
@@ -57,6 +58,8 @@ $h5-line-height: divide(1rem, $h5-font-size) !default;
 $h6-font-size: divide(10rem, 16) !default;
 $h6-line-height: divide(1rem, $h6-font-size) !default;
 
+$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
+
 $display-font-sizes: (
   1: 5rem,
   2: 4.5rem,
@@ -205,7 +208,6 @@ $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
 // Code
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
 $code-color: $primary !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
@@ -326,6 +328,8 @@ $breadcrumb-variants: (
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: $font-weight-medium !default;
+$badge-padding-y: .25em !default;
+$badge-padding-x: .5em !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
@@ -516,6 +520,8 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;
 
+//statuses
+$status-dot-size: .5rem !default;
 
 //steps
 $steps-border-width: 2px !default;
@@ -616,4 +622,8 @@ $flag-sizes: $avatar-sizes !default;
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
-$offcanvas-border-color: $border-color-transparent !default;
+$offcanvas-border-color: $border-color-transparent !default;
+
+// Placeholder
+$placeholder-opacity-min: .1 !default;
+$placeholder-opacity-max: .2 !default;

package/src/scss/layout/_page.scss

@@ -97,7 +97,7 @@
   margin: 0;
   font-size: $h2-font-size;
   line-height: $h2-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: $font-weight-bold;
   color: inherit;
   display: flex;
   align-items: center;

package/src/scss/mixins/_functions.scss

@@ -10,6 +10,20 @@
   @return shade-color($color, 10%);
 }
 
+@function theme-colors($social: true) {
+  $colors: $theme-colors;
+
+  @if $enable-extra-colors {
+    $colors: map-merge($colors, $extra-colors);
+  }
+
+  @if ($enable-social-colors and $social) {
+    $colors: map-merge($colors, $social-colors);
+  }
+
+  @return $colors;
+}
+
 @function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 

package/src/scss/mixins/_mixins.scss

@@ -14,26 +14,26 @@
 }
 
 @mixin scrollbar {
-  &::-webkit-scrollbar {
+  #{if(&, "&", "*")}::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     @include transition(background $transition-time);
   }
 
-  &::-webkit-scrollbar-thumb {
+  #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background: rgba(var(--#{$variable-prefix}body-color-rgb), .16);
   }
 
-  &::-webkit-scrollbar-track {
+  #{if(&, "&", "*")}::-webkit-scrollbar-track {
     background: rgba(var(--#{$variable-prefix}body-color-rgb), .06);
   }
 
-  &:hover::-webkit-scrollbar-thumb {
+  #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
     background: rgba(var(--#{$variable-prefix}body-color-rgb), .32);
   }
 
-  &::-webkit-scrollbar-corner {
+  #{if(&, "&", "*")}::-webkit-scrollbar-corner {
     background: transparent;
   }
 }
@@ -73,4 +73,4 @@
       }
     }
   }
-}
+}

package/src/scss/tabler-vendors.scss

@@ -4,3 +4,4 @@
 @import "vendor/litepicker";
 @import "vendor/tom-select";
 @import "vendor/apexcharts";
+@import "vendor/jsvectormap";

package/src/scss/ui/_badges.scss

@@ -1,17 +1,14 @@
 .badge {
-  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  padding: calc(.25rem - 1px) .25rem;
-  height: 1.25rem;
   border: 1px solid transparent;
-  min-width: 1.25rem;
+  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
-  font-size: $h6-font-size;
   letter-spacing: .04em;
+  vertical-align: bottom;
   text-transform: uppercase;
 
   @at-root a#{&} {
@@ -39,7 +36,7 @@
     width: 1em;
     height: 1em;
     font-size: 1rem;
-    margin: 0 .25rem 0 0;
+    stroke-width: 2;
   }
 }
 
@@ -50,6 +47,5 @@
 }
 
 .badge-pill {
-  border-radius: 100px;
-  min-width: 1.75em;
+  border-radius: $border-radius-pill;
 }

package/src/scss/ui/_breadcrumbs.scss

@@ -23,8 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item:before {
-      content: $symbol;
-    }
+    --#{$variable-prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

package/src/scss/ui/_buttons.scss

@@ -175,17 +175,7 @@
 //
 // Button color variations
 //
-$btn-colors: $theme-colors;
-
-@if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $extra-colors);
-}
-
-@if $enable-social-colors {
-  $btn-colors: map-merge($btn-colors, $social-colors);
-}
-
-@each $name, $color in $btn-colors {
+@each $name, $color in theme-colors() {
   .btn-#{$name},
   .btn-outline-#{$name},
   .btn-ghost-#{$name} {

package/src/scss/ui/_placeholder.scss

@@ -0,0 +1,9 @@
+.placeholder {
+  &:not(.btn):not([class*="bg-"]) {
+    background-color: currentColor !important;
+  }
+
+  &:not(.avatar):not([class*="card-img-"]), {
+    border-radius: $border-radius;
+  }
+}

package/src/scss/ui/_status.scss

@@ -0,0 +1,172 @@
+@keyframes status-pulsate-main {
+  40% {
+    transform: scale(1.25, 1.25);
+  }
+  60% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes status-pulsate-secondary {
+  10% {
+    transform: scale(1, 1)
+  }
+  30% {
+    transform: scale(3, 3)
+  }
+  80% {
+    transform: scale(3, 3)
+  }
+  100% {
+    transform: scale(1, 1)
+  }
+}
+
+@keyframes status-pulsate-tertiary {
+  25% {
+    transform: scale(1, 1);
+  }
+  80% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+}
+
+//
+// Status
+//
+.status {
+  --#{$variable-prefix}status-color: #{$text-muted};
+  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: .5rem .75rem;
+  gap: .5rem;
+  color: var(--#{$variable-prefix}status-color);
+  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  font-size: $font-size-base;
+  text-transform: none;
+  letter-spacing: normal;
+  border-radius: $border-radius-pill;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  margin: 0;
+
+  .status-dot {
+    background: var(--#{$variable-prefix}status-color);
+  }
+
+  .icon {
+    font-size: 1.25rem;
+  }
+}
+
+.status-lite {
+  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  background: transparent !important;
+  color: var(--#{$variable-prefix}body-text) !important;
+}
+
+@each $name, $color in theme-colors() {
+  .status-#{$name} {
+    --#{$variable-prefix}status-color: #{$color};
+    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+  }
+}
+
+//
+// Status dot
+//
+.status-dot {
+  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$variable-prefix}status-size: #{$status-dot-size};
+  position: relative;
+  display: inline-block;
+  width: var(--#{$variable-prefix}status-size);
+  height: var(--#{$variable-prefix}status-size);
+  background: var(--#{$variable-prefix}status-dot-color);
+  border-radius: $border-radius-pill;
+}
+
+.status-dot-animated {
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: inherit;
+    border-radius: inherit;
+    opacity: .6;
+    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
+  }
+}
+
+$btn-colors: $theme-colors;
+
+@if $enable-extra-colors {
+  $btn-colors: map-merge($btn-colors, $extra-colors);
+}
+
+@if $enable-social-colors {
+  $btn-colors: map-merge($btn-colors, $social-colors);
+}
+
+//
+// Status indicator
+//
+.status-indicator {
+  --#{$variable-prefix}status-indicator-size: 2.5rem;
+  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  display: block;
+  position: relative;
+  width: var(--#{$variable-prefix}status-indicator-size);
+  height: var(--#{$variable-prefix}status-indicator-size);
+}
+
+.status-indicator-circle {
+  --#{$variable-prefix}status-circle-size: .75rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: calc(var(--#{$variable-prefix}status-circle-size) / -2) 0 0 calc(var(--#{$variable-prefix}status-circle-size) / -2);
+  width: var(--#{$variable-prefix}status-circle-size);
+  height: var(--#{$variable-prefix}status-circle-size);
+  border-radius: $border-radius-pill;
+  background: var(--#{$variable-prefix}status-color);
+
+  &:nth-child(1) {
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+    opacity: .1;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+    opacity: .3;
+  }
+}
+
+.status-indicator-animated {
+  .status-indicator-circle {
+    &:nth-child(1) {
+      animation: 2s linear 1s infinite backwards status-pulsate-main;
+    }
+
+    &:nth-child(2) {
+      animation: 2s linear 1s infinite backwards status-pulsate-secondary;
+    }
+
+    &:nth-child(3) {
+      animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
+    }
+  }
+}

package/src/scss/ui/forms/_validation.scss

@@ -1,5 +1,5 @@
 %validation-lite {
-  border-color: var(--#{$variable-prefix}border-color);
+  border-color: var(--#{$variable-prefix}border-color) !important;
 }
 
 @each $state, $data in $form-validation-states {

package/src/scss/utils/_colors.scss

@@ -1,45 +1,18 @@
 // stylelint-disable declaration-no-important
 
-@each $color, $value in $theme-colors {
-  .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !important;
+// All colors
+@each $color, $value in theme-colors() {
+  .bg-#{"" + $color} {
+    color: #ffffff !important;
+    background: $value !important;
   }
-}
 
-// Extra colors
-@if $enable-extra-colors {
-  @each $color, $value in $extra-colors {
-    .bg-#{"" + $color} {
-      background: $value;
-    }
-
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
-
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+  .text-#{"" + $color} {
+    color: $value !important;
   }
-}
-
-// Social colors
-@if $enable-social-colors {
-  @each $color, $value in $social-colors {
-    .bg-#{"" + $color} {
-      color: #ffffff !important;
-      background: $value !important;
-    }
-
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
 
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
+  .bg-#{"" + $color}-lt {
+    color: $value !important;
+    background: theme-color-lighter($value, true) !important;
   }
 }

package/src/scss/vendor/_jsvectormap.scss

@@ -0,0 +1,47 @@
+$tooltip-bg-color: $dark;
+$tooltip-font-family: inherit;
+$tooltip-font-size: $h5-font-size;
+$box-shadow: $card-shadow;
+$legend-tick-sample-radius: $border-radius-pill;
+
+@import "~jsvectormap/dist/css/jsvectormap";
+
+.jvm-series-container .jvm-legend  .jvm-legend-title {
+  border-bottom: 0;
+  font-weight: $font-weight-medium;
+}
+
+.jvm-series-container .jvm-legend {
+  background-color: var(--#{$variable-prefix}card-bg);
+  border: 1px solid var(--#{$variable-prefix}border-color);
+  min-width: 8rem;
+
+  .jvm-legend-inner .jvm-legend-tick {
+    display: flex;
+    align-items: center;
+
+    .jvm-legend-tick-sample {
+      width: .75rem;
+      height: .75rem;
+    }
+  }
+}
+
+.jvm-zoom-btn {
+  border: 1px solid var(--#{$variable-prefix}border-color);
+  background: var(--#{$variable-prefix}card-bg);
+  color: var(--#{$variable-prefix}body-color);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1rem;
+  box-shadow: $card-shadow;
+
+  &.jvm-zoomout {
+    top: 2.5rem;
+  }
+}

package/src/scss/vendor/_litepicker.scss

@@ -17,11 +17,13 @@
     fill: none !important;
   }
 
-  .container__months {
+  .container__main {
     border: 1px solid var(--#{$variable-prefix}border-color);
     border-radius: $border-radius;
     box-shadow: $dropdown-box-shadow;
+  }
 
+  .container__months {
     .month-item-name,
     .month-item-year {
       font-weight: $font-weight-medium !important;