@tabler/core 1.0.0-alpha.24 → 1.0.0-beta11

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-beta11",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "gulp start",
+    "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
     "preview": "gulp build --preview",
     "svg-optimize": "svgo -f svg/brand --pretty",
     "unused-files": "node build/unused-files.js",
     "release": "release-it",
     "svg-icons": "gulp svg-icons",
-    "percy": "gulp build && npx percy snapshot demo"
+    "percy": "gulp build && npx percy snapshot demo",
+    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
+    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
+    "storybook": "start-storybook -p 6006",
+    "changelog": "gulp changelog"
   },
   "repository": {
     "type": "git",
@@ -35,7 +40,7 @@
     "url": "https://github.com/sponsors/codecalm"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "files": [
     "dist/**/*",
@@ -45,52 +50,130 @@
   ],
   "style": "dist/css/tabler.css",
   "sass": "src/scss/tabler.scss",
+  "unpkg": "dist/js/tabler.min.js",
+  "umd:main": "dist/js/tabler.min.js",
+  "module": "dist/js/tabler.esm.js",
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@rollup/plugin-replace": "^2.3.4",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/pluginutils": "^4.2.1",
     "@rollup/stream": "^2.0.0",
-    "rollup-plugin-cleanup": "^3.2.1",
-    "autoprefixer": "^10.2.4",
-    "browser-sync": "^2.26.14",
-    "critical": "^2.0.6",
+    "apexcharts": "^3.35.4",
+    "autoprefixer": "^10.4.8",
+    "autosize": "^5.0.1",
+    "browser-sync": "^2.27.10",
+    "bundlewatch": "^0.3.3",
+    "choices.js": "^10.1.0",
+    "chromatic": "^6.7.3",
+    "countup.js": "^2.3.2",
+    "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
+    "dropzone": "^6.0.0-beta.2",
+    "flatpickr": "^4.6.13",
+    "fslightbox": "^3.3.1",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "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.0",
-    "gulp-purgecss": "^4.0.0",
+    "gulp-postcss": "^9.0.1",
+    "gulp-purgecss": "^4.1.3",
     "gulp-rename": "^2.0.0",
-    "gulp-rtlcss": "^1.4.1",
-    "gulp-sass": "^4.1.0",
-    "postcss": "^8.2.5",
-    "release-it": "^14.3.0",
-    "rollup": "^2.38.5",
+    "gulp-rtlcss": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "imask": "^6.4.2",
+    "jsvectormap": "^1.5.0",
+    "list.js": "^2.3.1",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.6.0",
+    "plyr": "^3.7.2",
+    "postcss": "^8.4.14",
+    "release-it": "^15.2.0",
+    "rollup": "^2.77.2",
     "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",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^1.10.0",
-    "yargs": "^16.2.0"
+    "yaml": "^2.1.1",
+    "yargs": "^17.5.1"
   },
   "dependencies": {
-    "@popperjs/core": "^2.6.0",
-    "@tabler/icons": "^1.39.1",
-    "apexcharts": "^3.24.0",
-    "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#e50c11b8c6434b6d68ea5897771e4d35fe12f5c3",
-    "choices.js": "^9.0.1",
-    "countup.js": "^2.0.7",
-    "flatpickr": "^4.6.9",
-    "imask": "^6.0.5",
-    "litepicker": "^2.0.3",
-    "nouislider": "^14.6.3"
+    "@popperjs/core": "^2.11.5",
+    "@tabler/icons": "^1.78.1",
+    "bootstrap": "5.2.0"
+  },
+  "peerDependencies": {
+    "apexcharts": "^3.35.4",
+    "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",
+    "list.js": "^2.3.1",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.6.0",
+    "plyr": "^3.7.2",
+    "tinymce": "^6.1.2",
+    "tom-select": "^2.1.0"
+  },
+  "peerDependenciesMeta": {
+    "apexcharts": {
+      "optional": true
+    },
+    "autosize": {
+      "optional": true
+    },
+    "choices.js": {
+      "optional": true
+    },
+    "countup.js": {
+      "optional": true
+    },
+    "dropzone": {
+      "optional": true
+    },
+    "flatpickr": {
+      "optional": true
+    },
+    "fslightbox": {
+      "optional": true
+    },
+    "imask": {
+      "optional": true
+    },
+    "list.js": {
+      "optional": true
+    },
+    "litepicker": {
+      "optional": true
+    },
+    "nouislider": {
+      "optional": true
+    },
+    "tom-select": {
+      "optional": true
+    },
+    "tinymce": {
+      "optional": true
+    },
+    "jsvectormap": {
+      "optional": true
+    },
+    "plyr": {
+      "optional": true
+    }
   },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"

package/src/js/demo.js

@@ -0,0 +1,97 @@
+// 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' }
+}
+
+// Theme config
+const config = {}
+for (const [key, params] of Object.entries(items)) {
+   const lsParams = localStorage.getItem(params.localStorage)
+   config[key] = lsParams ? lsParams : params.default
+}
+
+// Parse url params
+const parseUrl = () => {
+	const search = window.location.search.substring(1)
+	const params = search.split('&')
+
+	for (let i = 0; i < params.length; i++) {
+		const arr = params[i].split('=')
+		const key = arr[0]
+		const value = arr[1]
+
+		if (!!items[key]) {
+			// Save to localStorage
+			localStorage.setItem(items[key].localStorage, value)
+
+			// Update local variables
+			config[key] = value
+		}
+	}
+}
+
+// Toggle form controls
+const toggleFormControls = (form) => {
+	for (const [key, params] of Object.entries(items)) {
+		const elem = form.querySelector(`[name="settings-${key}"][value="${config[key]}"]`)
+
+		if (elem) {
+			elem.checked = true
+		}
+	}
+}
+
+// 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
+	for (const [key, params] of Object.entries(items)) {
+		// Save to localStorage
+		const value = form.querySelector(`[name="settings-${key}"]:checked`).value
+		localStorage.setItem(params.localStorage, value)
+
+		// Update local variables
+		config[key] = value
+	}
+
+	// Update body classes
+	updateBodyClasses();
+
+	window.dispatchEvent(new Event('resize'));
+
+	(new bootstrap.Offcanvas(form)).hide()
+}
+
+
+// Parse url
+parseUrl()
+
+// Update body classes
+updateBodyClasses();
+
+// Elements
+const form = document.querySelector('#offcanvasSettings')
+
+// Toggle form controls
+if (form) {
+
+	form.addEventListener('submit', function (e) {
+		e.preventDefault()
+
+		submitForm(form)
+	})
+
+	toggleFormControls(form)
+}

package/src/js/src/dropdown.js

@@ -0,0 +1,9 @@
+import { Dropdown } from 'bootstrap';
+
+/*
+Core dropdowns
+ */
+let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
+dropdownTriggerList.map(function (dropdownTriggerEl) {
+	return new Dropdown(dropdownTriggerEl);
+});

package/src/js/src/tab.js

@@ -0,0 +1,16 @@
+import { Tab } from 'bootstrap';
+
+export const EnableActivationTabsFromLocationHash = () => {
+  const locationHash = window.location.hash;
+
+  if (locationHash) {
+	 const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
+	 const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
+
+	 matchedTabs.map(tab => {
+		new Tab(tab).show();
+	 });
+  }
+}
+
+EnableActivationTabsFromLocationHash()

package/src/js/tabler.esm.js

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

package/src/js/tabler.js

@@ -1,10 +1,13 @@
 //Vendor
 
-import './autosize';
-import './input-mask';
-import './dropdown';
-import './tooltip';
-import './popover';
-import './switch-icon';
-import './toast';
+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';
 
+window.bootstrap = bootstrap;

package/src/scss/_bootstrap-components.scss

@@ -1,3 +1,4 @@
+// Layout & components
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
@@ -27,6 +28,8 @@
 @import "~bootstrap/scss/popover";
 @import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
 
 // Helpers
 @import "~bootstrap/scss/helpers";

package/src/scss/_bootstrap-config.scss

@@ -1,4 +1,6 @@
+// Config
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";

package/src/scss/{_tabler-core.scss → _core.scss}

@@ -7,6 +7,7 @@
 @import "layout/navbar";
 @import "layout/page";
 @import "layout/footer";
+@import "layout/dark";
 
 @import "ui/accordion";
 @import "ui/alerts";
@@ -15,9 +16,11 @@
 @import "ui/breadcrumbs";
 @import "ui/buttons";
 @import "ui/calendars";
+@import "ui/carousel";
 @import "ui/cards";
 @import "ui/close";
 @import "ui/dropdowns";
+@import "ui/datagrid";
 @import "ui/empty";
 @import "ui/grid";
 @import "ui/icons";
@@ -42,14 +45,16 @@
 @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";
 @import "ui/toolbar";
 @import "ui/type";
 @import "ui/charts";
+@import "ui/offcanvas";
 
 @import "utils/background";
 @import "utils/colors";
@@ -59,5 +64,4 @@
 @import "utils/shadow";
 @import "utils/text";
 
-@import "dark";
 @import "debug";

package/src/scss/_mixins-override.scss

@@ -13,12 +13,12 @@
     height: $caret-width;
     border-bottom: 1px solid;
     border-left: 1px solid;
-    margin-inline-end: .1em;
+    margin-right: .1em;
 
     @if $direction != 'left' {
-      margin-inline-start: $caret-spacing;
+      margin-left: $caret-spacing;
     } @else {
-      margin-inline-end: $caret-spacing;
+      margin-right: $caret-spacing;
     }
 
     @if $direction == down {
@@ -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,4 +1,5 @@
 $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,
@@ -36,28 +37,16 @@ $utilities: (
       move: move,
       not-allowed: not-allowed,
       zoom-in: zoom-in,
-      zoom-out: zoom-out
-    )
-  ),
-  "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,
+      zoom-out: zoom-out,
+      default: default,
+      none: none,
+      help: help,
+      progress: progress,
+      wait: wait,
+      text: text,
+      v-text: vertical-text,
+      grab: grab,
+      grabbing: grabbing,
     )
   ),
   "border": (
@@ -102,4 +91,10 @@ $utilities: (
     class: h,
     values: $size-values
   ),
-) !default;
+  "columns": (
+    property: columns,
+    class: columns,
+    responsive: true,
+    values: 2 3 4
+  )
+) !default;