Merge remote-tracking branch 'origin/tabler-v1' into tabler-v1

.gitignore

@@ -11,6 +11,8 @@ tmp/
 /_site/
 /.cache/
 
+.vscode/
+
 /_gh_pages/
 /site/docs/**/dist/
 /site/static/**/dist/

build/browsersync.js

@@ -10,12 +10,11 @@ bs.init({
       '/dist': 'dist',
       '/libs': 'static/libs',
       '/img': 'static/img',
-    }
+    },
   },
   files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
   watchOptions: {
-    ignoreInitial: true
+    ignoreInitial: true,
   },
-  notify: false
+  notify: false,
 });
-

build/generate-font-codepoints.js

@@ -4,18 +4,17 @@ const fs = require('fs'),
   path = require('path'),
   yaml = require('yaml');
 
-const data = fs.readFileSync(path.resolve(__dirname, '../scss/fonts/_tabler-webfont.scss'), "utf8"),
+const data = fs.readFileSync(path.resolve(__dirname, '../scss/fonts/_tabler-webfont.scss'), 'utf8'),
   re = /\$icon-([^\-\s]+)-([^:\s]+):\s'([^'\n]+)';/g;
 
 let items = {};
 
-data.replace(re, function (match, g1, g2, g3) {
-  if(!items[g1]) {
+data.replace(re, function(match, g1, g2, g3) {
+  if (!items[g1]) {
     items[g1] = {};
   }
 
   items[g1][g2] = g3;
 });
 
-
 fs.writeFileSync('pages/_data/icons.yml', yaml.stringify(items));

build/rollup.config.js

@@ -20,13 +20,13 @@ const plugins = [
       'createClass',
       'inheritsLoose',
       'defineProperty',
-      'objectSpread'
-    ]
-  })
+      'objectSpread',
+    ],
+  }),
 ];
 
 const globals = {
-  'popper.js': 'Popper'
+  'popper.js': 'Popper',
 };
 
 if (BUNDLE) {
@@ -43,10 +43,10 @@ const rollupConfig = {
     banner,
     file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
     format: ESM ? 'esm' : 'umd',
-    globals
+    globals,
   },
   external,
-  plugins
+  plugins,
 };
 
 if (!ESM) {

js/app/charts.js

-(function ($) {
-  $(document).ready(function () {
-
-    $().peity && $('[data-spark]').each(function () {
-      const $this = $(this),
-        data = $this.attr('data-spark'),
-        color = $this.attr('data-spark-color') || 'blue',
-        type = $this.attr('data-spark-type') || 'line';
-
-      const $div = $('<div />').html(data);
-      $this.append($div);
-
-      let strokeColor = tabler.colors[color],
-        fillColor = tabler.colors[color];
-
-      if (type === 'donut' || type === 'pie') {
-        fillColor = [fillColor, tabler.hexToRgbA(fillColor, .1)];
-      } else if (type === 'bar') {
-        fillColor = [fillColor];
-      } else if (type === 'line') {
-        fillColor = tabler.hexToRgbA(fillColor, .1);
-      }
-
-      $div.peity(type, {
-        width: $this.width(),
-        height: $this.height(),
-        // max: 100,
-        // min: 0,
-        stroke: strokeColor,
-        strokeWidth: 2,
-        fill: fillColor,
-        padding: .2,
-        innerRadius: (type === 'donut') ? 17 : 0
-      });
-
-
-    });
+(function($) {
+  $(document).ready(function() {
+    $().peity &&
+      $('[data-spark]').each(function() {
+        const $this = $(this),
+          data = $this.attr('data-spark'),
+          color = $this.attr('data-spark-color') || 'blue',
+          type = $this.attr('data-spark-type') || 'line';
+
+        const $div = $('<div />').html(data);
+        $this.append($div);
+
+        let strokeColor = tabler.colors[color],
+          fillColor = tabler.colors[color];
+
+        if (type === 'donut' || type === 'pie') {
+          fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+        } else if (type === 'bar') {
+          fillColor = [fillColor];
+        } else if (type === 'line') {
+          fillColor = tabler.hexToRgbA(fillColor, 0.1);
+        }
 
+        $div.peity(type, {
+          width: $this.width(),
+          height: $this.height(),
+          // max: 100,
+          // min: 0,
+          stroke: strokeColor,
+          strokeWidth: 2,
+          fill: fillColor,
+          padding: 0.2,
+          innerRadius: type === 'donut' ? 17 : 0,
+        });
+      });
   });
 })(jQuery);
 
-
 /*
 charts default configuration
  */
 if (window.Apex) {
-
-  var borderColor = 'rgba(0, 0, 0, 0.09)';
-  var mutedColor = '#888e9a';
+  const borderColor = 'rgba(0, 0, 0, 0.09)';
+  const mutedColor = '#888e9a';
 
   window.Apex = {
     chart: {
@@ -56,11 +51,11 @@ if (window.Apex) {
         show: false,
       },
       zoom: {
-        enabled: false
+        enabled: false,
       },
       animations: {
         enabled: false,
-      }
+      },
     },
 
     grid: {
@@ -71,8 +66,8 @@ if (window.Apex) {
         right: 0,
         left: 0,
         bottom: 0,
-        top: 0
-      }
+        top: 0,
+      },
     },
 
     dataLabels: {
@@ -102,7 +97,7 @@ if (window.Apex) {
 
     fill: {
       type: 'solid',
-      opacity: 1
+      opacity: 1,
     },
 
     markers: {
@@ -111,7 +106,7 @@ if (window.Apex) {
       radius: 2,
       hover: {
         size: 4,
-      }
+      },
     },
 
     legend: {
@@ -119,11 +114,11 @@ if (window.Apex) {
       fontSize: '14px',
       markers: {
         width: 8,
-        height: 8
+        height: 8,
       },
       itemMargin: {
         horizontal: 0,
-        vertical: 8
+        vertical: 8,
       },
     },
 
@@ -131,7 +126,7 @@ if (window.Apex) {
       margin: 0,
       style: {
         fontSize: '14px',
-      }
+      },
     },
 
     subtitle: {
@@ -139,7 +134,7 @@ if (window.Apex) {
     },
 
     tooltip: {
-      fillSeriesColor: false
+      fillSeriesColor: false,
     },
 
     xaxis: {
@@ -147,27 +142,27 @@ if (window.Apex) {
         style: {
           colors: mutedColor,
           fontSize: '12px',
-        }
+        },
       },
       tooltip: {
-        enabled: false
+        enabled: false,
       },
       axisBorder: {
         color: borderColor,
-        height: 0
+        height: 0,
       },
       axisTicks: {
         show: true,
         height: 4,
-        color: borderColor
-      }
+        color: borderColor,
+      },
     },
 
     yaxis: {
       show: false,
       labels: {
-        show: false
-      }
-    }
+        show: false,
+      },
+    },
   };
 }

js/tabler.js

 const tabler = {
-  colorVariation: function (color, variation) {
+  colorVariation: function(color, variation) {
     const colorValue = this.colors[color];
 
     if (colorValue) {
       switch (variation) {
-      case 'light':
-        return this.mixColors(colorValue, '#ffffff', 70);
-      case 'lighten':
-        return this.mixColors(colorValue, '#ffffff', 30);
-      case 'lightest':
-        return this.mixColors(colorValue, '#ffffff', 10);
-      case 'dark':
-        return this.mixColors(colorValue, '#000000', 80);
-      case 'darken':
-        return this.mixColors(colorValue, '#000000', 40);
-      case 'darkest':
-        return this.mixColors(colorValue, '#000000', 20);
+        case 'light':
+          return this.mixColors(colorValue, '#ffffff', 70);
+        case 'lighten':
+          return this.mixColors(colorValue, '#ffffff', 30);
+        case 'lightest':
+          return this.mixColors(colorValue, '#ffffff', 10);
+        case 'dark':
+          return this.mixColors(colorValue, '#000000', 80);
+        case 'darken':
+          return this.mixColors(colorValue, '#000000', 40);
+        case 'darkest':
+          return this.mixColors(colorValue, '#000000', 20);
       }
 
       return colorValue;
@@ -24,7 +24,7 @@ const tabler = {
     throw new Error('Wrong color: ' + color);
   },
 
-  hexToRgbA: function (hex, opacity) {
+  hexToRgbA: function(hex, opacity) {
     let c;
 
     opacity = opacity || 1;
@@ -40,7 +40,7 @@ const tabler = {
     throw new Error('Bad Hex');
   },
 
-  mixColors: function (color_1, color_2, weight) {
+  mixColors: function(color_1, color_2, weight) {
     color_1 = color_1.substr(1);
     color_2 = color_2.substr(1);
 
@@ -52,7 +52,7 @@ const tabler = {
       return parseInt(h, 16);
     }
 
-    weight = (typeof(weight) !== 'undefined') ? weight : 50;
+    weight = typeof weight !== 'undefined' ? weight : 50;
 
     let color = '#';
 
@@ -72,10 +72,14 @@ const tabler = {
     return color;
   },
 
-  toggleFullscreen: function (elem) {
+  toggleFullscreen: function(elem) {
     elem = elem || document.documentElement;
-    if (!document.fullscreenElement && !document.mozFullScreenElement &&
-      !document.webkitFullscreenElement && !document.msFullscreenElement) {
+    if (
+      !document.fullscreenElement &&
+      !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement &&
+      !document.msFullscreenElement
+    ) {
       if (elem.requestFullscreen) {
         elem.requestFullscreen();
       } else if (elem.msRequestFullscreen) {
@@ -96,14 +100,13 @@ const tabler = {
         document.webkitExitFullscreen();
       }
     }
-  }
+  },
 };
 
-
-$(document).ready(function () {
+$(document).ready(function() {
   const $body = $('body');
 
-  $body.on('click', '[data-toggle="sidebar"]', function (e) {
+  $body.on('click', '[data-toggle="sidebar"]', function(e) {
     $body.toggleClass('sidebar-opened');
 
     e.preventDefault();
@@ -113,37 +116,34 @@ $(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
 
-
   /*
   Autosize plugin
    */
-  if(window.autosize) {
+  if (window.autosize) {
     (function() {
-
-      var $elem = $('[data-toggle="autosize"]');
+      const $elem = $('[data-toggle="autosize"]');
 
       if ($elem) {
         $elem.each(function() {
           autosize($(this));
         });
       }
-
     })();
   }
 
   /*
   Imask plugin
    */
-  if(window.IMask) {
+  if (window.IMask) {
     (function() {
-      var $elem = $('[data-mask]');
+      const $elem = $('[data-mask]');
 
       if ($elem) {
         $elem.each(function() {
           IMask($(this).get(0), {
             mask: $(this).attr('data-mask'),
-            lazy: $(this).attr('data-mask-visible') === 'true'
-          })
+            lazy: $(this).attr('data-mask-visible') === 'true',
+          });
         });
       }
     })();
@@ -152,8 +152,8 @@ $(document).ready(function () {
   /**
    * Seelectize plugin
    */
-  if(jQuery && jQuery().selectize) {
-    var $elem = $('[data-selectize]');
+  if (jQuery && jQuery().selectize) {
+    const $elem = $('[data-selectize]');
 
     if ($elem) {
       $elem.selectize();

package.json

@@ -4,22 +4,23 @@
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "npm-run-all --parallel browsersync watch html-watch",
-    "build": "npm-run-all lint html-build css-compile js-compile",
+    "build": "npm-run-all html-build css js",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
     "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
     "lint": "npm-run-all --parallel js-lint css-lint",
+    "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",
     "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
     "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
-    "css-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/css/ site/static/dist/",
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
     "css-main": "npm-run-all css-compile css-prefix",
     "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"",
+    "js": "npm-run-all js-compile js-minify",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/",
     "js-compile": "npm-run-all --parallel js-compile-* --sequential js-minify",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -81,5 +82,31 @@
     "bootstrap": "twbs/bootstrap#41fcd13",
     "imask": "5.1.5",
     "selectize": "0.12.6"
-  }
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/css/tabler.css",
+      "maxSize": "50 kB"
+    },
+    {
+      "path": "./dist/css/tabler.min.css",
+      "maxSize": "45 kB"
+    },
+    {
+      "path": "./dist/js/tabler.js",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.min.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./dist/js/tabler.bundle.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./dist/js/tabler.bundle.min.js",
+      "maxSize": "1.1 kB"
+    }
+  ]
 }