@tabler/core 1.0.0-beta11 → 1.0.0-beta13

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta11",
+  "version": "1.0.0-beta13",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
+  "homepage": "https://tabler.io",
   "scripts": {
     "start": "gulp start",
     "start-plugins": "gulp start --with-plugins",
@@ -15,7 +16,8 @@
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
-    "changelog": "gulp changelog"
+    "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"
   },
   "repository": {
     "type": "git",
@@ -40,7 +42,7 @@
     "url": "https://github.com/sponsors/codecalm"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "files": [
     "dist/**/*",
@@ -54,24 +56,66 @@
   "umd:main": "dist/js/tabler.min.js",
   "module": "dist/js/tabler.esm.js",
   "main": "dist/js/tabler.js",
-  "homepage": "https://tabler.io",
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "./dist/css/tabler.css",
+        "maxSize": "61 kB"
+      },
+      {
+        "path": "./dist/css/tabler.min.css",
+        "maxSize": "55 kB"
+      },
+      {
+        "path": "./dist/css/tabler.rtl.css",
+        "maxSize": "61 kB"
+      },
+      {
+        "path": "./dist/css/tabler.rtl.min.css",
+        "maxSize": "55 kB"
+      },
+      {
+        "path": "./dist/css/tabler-flags.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-flags.min.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-payments.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-payments.min.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/js/tabler.js",
+        "maxSize": "100 kB"
+      },
+      {
+        "path": "./dist/js/tabler.min.js",
+        "maxSize": "50 kB"
+      }
+    ]
+  },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.3",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/pluginutils": "^4.2.1",
     "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.35.4",
-    "autoprefixer": "^10.4.8",
+    "apexcharts": "^3.35.5",
+    "autoprefixer": "^10.4.12",
     "autosize": "^5.0.1",
     "browser-sync": "^2.27.10",
     "bundlewatch": "^0.3.3",
     "choices.js": "^10.1.0",
-    "chromatic": "^6.7.3",
+    "chromatic": "^6.10.1",
     "countup.js": "^2.3.2",
-    "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
@@ -81,52 +125,52 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-debug": "^4.0.0",
     "gulp-header": "^2.0.9",
-    "gulp-minify": "^3.1.0",
     "gulp-postcss": "^9.0.1",
-    "gulp-purgecss": "^4.1.3",
+    "gulp-purgecss": "^5.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
-    "imask": "^6.4.2",
-    "jsvectormap": "^1.5.0",
+    "gulp-terser": "^2.1.0",
+    "imask": "^6.4.3",
+    "jsvectormap": "^1.5.1",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
-    "nouislider": "^15.6.0",
+    "nouislider": "^15.6.1",
     "plyr": "^3.7.2",
-    "postcss": "^8.4.14",
-    "release-it": "^15.2.0",
-    "rollup": "^2.77.2",
+    "postcss": "^8.4.17",
+    "release-it": "^15.5.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.54.1",
-    "tinymce": "^6.1.2",
-    "tom-select": "^2.1.0",
+    "sass": "^1.55.0",
+    "tinymce": "^6.2.0",
+    "tom-select": "^2.2.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^2.1.1",
-    "yargs": "^17.5.1"
+    "yaml": "^2.1.3",
+    "yargs": "^17.6.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
-    "@tabler/icons": "^1.78.1",
-    "bootstrap": "5.2.0"
+    "@popperjs/core": "^2.11.6",
+    "@tabler/icons": "^1.105.0",
+    "bootstrap": "~5.2.2"
   },
   "peerDependencies": {
-    "apexcharts": "^3.35.4",
+    "apexcharts": "^3.35.5",
     "autosize": "^5.0.1",
     "choices.js": "^10.1.0",
     "countup.js": "^2.3.2",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.3.1",
-    "imask": "^6.4.2",
-    "jsvectormap": "^1.5.0",
+    "imask": "^6.4.3",
+    "jsvectormap": "^1.5.1",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
-    "nouislider": "^15.6.0",
+    "nouislider": "^15.6.1",
     "plyr": "^3.7.2",
-    "tinymce": "^6.1.2",
-    "tom-select": "^2.1.0"
+    "tinymce": "^6.2.0",
+    "tom-select": "^2.2.1"
   },
   "peerDependenciesMeta": {
     "apexcharts": {

package/src/js/demo-theme.js

@@ -0,0 +1,25 @@
+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+
+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)
+	 selectedTheme = params.theme
+} else {
+	 const storedTheme = localStorage.getItem(themeStorageKey)
+	 selectedTheme = storedTheme ? storedTheme : defaultTheme
+}
+
+document.body.classList.remove('theme-dark', 'theme-light');
+document.body.classList.add(`theme-${selectedTheme}`);

package/src/js/demo.js

@@ -1,6 +1,5 @@
 // Setting items
 const items = {
-	'theme': { localStorage: 'tablerTheme', default: 'light' },
 	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
 	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
 	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
@@ -44,16 +43,6 @@ const toggleFormControls = (form) => {
 	}
 }
 
-// Update body classes
-const updateBodyClasses = () => {
-	document.body.classList.remove('theme-dark', 'theme-light');
-	document.body.classList.add(`theme-${config.theme}`);
-
-	// for (const [key, params] of Object.entries(items)) {
-	// 	document.body.setAttribute(`data-${key}`, config[key]);
-	// }
-}
-
 // Submit form
 const submitForm = (form) => {
 	// Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	// Update body classes
-	updateBodyClasses();
-
 	window.dispatchEvent(new Event('resize'));
 
 	(new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
 // Parse url
 parseUrl()
 
-// Update body classes
-updateBodyClasses();
-
 // Elements
 const form = document.querySelector('#offcanvasSettings')
 

package/src/js/src/dropdown.js

@@ -5,5 +5,8 @@ Core dropdowns
  */
 let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
 dropdownTriggerList.map(function (dropdownTriggerEl) {
-	return new Dropdown(dropdownTriggerEl);
-});
+	let options = {
+		boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+	}
+	return new Dropdown(dropdownTriggerEl, options);
+});

package/src/js/src/tabler.js

@@ -0,0 +1,17 @@
+export const prefix = 'tblr-'
+
+export const hexToRgba = (hex, opacity) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
+}
+
+export const getColor = (color, opacity = 1) => {
+  const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
+
+  if (opacity !== 1) {
+	 return hexToRgba(c, opacity)
+  }
+
+  return c
+}

package/src/js/tabler.js

@@ -9,5 +9,7 @@ import './src/switch-icon';
 import './src/tab';
 import './src/toast';
 import * as bootstrap from 'bootstrap';
+import * as tabler from './src/tabler';
 
-window.bootstrap = bootstrap;
+globalThis.bootstrap = bootstrap;
+globalThis.tabler = tabler;

package/src/scss/_core.scss

@@ -3,6 +3,7 @@
 
 @import "fonts/webfonts";
 
+@import "layout/root";
 @import "layout/core";
 @import "layout/navbar";
 @import "layout/page";
@@ -52,6 +53,7 @@
 @import "ui/tables";
 @import "ui/toasts";
 @import "ui/toolbar";
+@import "ui/tracking";
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";

package/src/scss/_mixins-override.scss

@@ -47,29 +47,29 @@
   // Override bootstrap core
 }
 
-//@mixin button-variant(
-//  $background: null,
-//  $border: null,
-//  $color: null,
-//  $hover-background: null,
-//  $hover-border: null,
-//  $hover-color: null,
-//  $active-background: null,
-//  $active-border: null,
-//  $active-color: null,
-//  $disabled-background: null,
-//  $disabled-border: null,
-//  $disabled-color: null
-//) {
-//  // Override bootstrap core
-//}
-//
-//@mixin button-outline-variant(
-//  $color: null,
-//  $color-hover: null,
-//  $active-background: null,
-//  $active-border: null,
-//  $active-color: null
-//) {
-//  // Override bootstrap core
-//}
+@mixin button-variant(
+  $background: null,
+  $border: null,
+  $color: null,
+  $hover-background: null,
+  $hover-border: null,
+  $hover-color: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null,
+  $disabled-background: null,
+  $disabled-border: null,
+  $disabled-color: null
+) {
+  // Override bootstrap core
+}
+
+@mixin button-outline-variant(
+  $color: null,
+  $color-hover: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null
+) {
+  // Override bootstrap core
+}

package/src/scss/_utilities.scss

@@ -1,8 +1,6 @@
-$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
-
 $border-values: (
-  null: $border-width solid $border-color-transparent,
-  wide: $border-width-wide solid $border-color-transparent,
+  null: $border-width var(--#{$prefix}border-style) $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
   0: 0,
 );