@tabler/core 1.0.0-beta2 → 1.0.0-beta6

package/src/js/demo.js

@@ -0,0 +1,98 @@
+// 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)) {
+	config[key] = localStorage.getItem(params.localStorage) ? localStorage.getItem(params.localStorage) : 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');
+	document.body.classList.remove('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

@@ -6,35 +6,4 @@ Core dropdowns
 let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
 dropdownTriggerList.map(function (dropdownTriggerEl) {
 	return new Dropdown(dropdownTriggerEl);
-});
-
-
-/*
-Nested dropdowns
- */
-const selectors = '.dropdown, .dropup, .dropend, .dropstart',
-	dropdowns = document.querySelectorAll(selectors);
-
-let currentTarget = undefined;
-
-dropdowns.forEach(dropdown => {
-	dropdown.addEventListener('mousedown', (e) => {
-		e.stopPropagation();
-
-		if (e.target.dataset.bsToggle && e.target.dataset.bsToggle === 'dropdown') {
-			currentTarget = e.currentTarget;
-		}
-	});
-
-	dropdown.addEventListener('hide.bs.dropdown', (e) => {
-		e.stopPropagation();
-
-		const parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
-
-		if (parent && parent === dropdown) {
-			e.preventDefault();
-		}
-
-		currentTarget = undefined;
-	});
 });

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

@@ -6,5 +6,8 @@ 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 @@
+// 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,3 +1,4 @@
+// Config
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

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";
@@ -42,14 +43,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 +62,4 @@
 @import "utils/shadow";
 @import "utils/text";
 
-@import "dark";
 @import "debug";

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": (
@@ -108,4 +97,4 @@ $utilities: (
     responsive: true,
     values: 2 3 4
   )
-) !default;
+) !default;

package/src/scss/_variables.scss

@@ -7,13 +7,14 @@ $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;
 
 // FONTS
 $google-font: 'Inter' !default;
-$google-font-monospaced: null !default;
+$google-font-monospaced: false !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 $font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
@@ -35,27 +36,29 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$line-height-base: (1.25rem/$font-size-base) !default;
-$line-height-sm: (1rem/$font-size-base) !default;
-$line-height-lg: (1.5rem/$font-size-base) !default;
+$line-height-base: divide(1.25rem, $font-size-base) !default;
+$line-height-sm: divide(1rem, $font-size-base) !default;
+$line-height-lg: divide(1.5rem, $font-size-base) !default;
 
-$h1-font-size: (24rem / 16) !default;
-$h1-line-height: (2rem/$h1-font-size) !default;
+$h1-font-size: divide(24rem, 16) !default;
+$h1-line-height: divide(2rem, $h1-font-size) !default;
 
-$h2-font-size: (20rem / 16) !default;
-$h2-line-height: (1.75rem/$h2-font-size) !default;
+$h2-font-size: divide(20rem, 16) !default;
+$h2-line-height: divide(1.75rem, $h2-font-size) !default;
 
-$h3-font-size: (16rem / 16) !default;
-$h3-line-height: (1.5rem/$h3-font-size) !default;
+$h3-font-size: divide(16rem, 16) !default;
+$h3-line-height: divide(1.5rem, $h3-font-size) !default;
 
 $h4-font-size: $font-size-base !default;
-$h4-line-height: (1.25rem/$h4-font-size) !default;
+$h4-line-height: divide(1.25rem, $h4-font-size) !default;
 
-$h5-font-size: (12rem / 16) !default;
-$h5-line-height: (1rem/$h5-font-size) !default;
+$h5-font-size: divide(12rem, 16) !default;
+$h5-line-height: divide(1rem, $h5-font-size) !default;
 
-$h6-font-size: (10rem / 16) !default;
-$h6-line-height: (1rem/$h6-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,
@@ -66,10 +69,6 @@ $display-font-sizes: (
   6: 2.5rem
 ) !default;
 
-$small-font-size: percentage($h5-font-size/$font-size-base) !default;
-$code-font-size: $small-font-size !default;
-$code-line-height: 1.25rem !default;
-
 $lead-font-size: $font-size-base !default;
 $lead-font-weight: $font-weight-normal !default;
 
@@ -82,10 +81,23 @@ $text-muted-light-opacity: .4 !default;
 $text-muted-dark-opacity: .8 !default;
 
 $border-opacity: .16 !default;
+$border-light-opacity: .08 !default;
 $border-dark-opacity: .24 !default;
-
-$light: #f4f6fa !default;
-$dark: #232e3c !default;
+$border-active-opacity: .48 !default;
+
+$gray-50: #f8fafc !default;
+$gray-100: #f1f5f9 !default;
+$gray-200: #e2e8f0 !default;
+$gray-300: #cbd5e1 !default;
+$gray-400: #94a3b8 !default;
+$gray-500: #64748b !default;
+$gray-600: #475569 !default;
+$gray-700: #334155 !default;
+$gray-800: #1e293b !default;
+$gray-900: #0f172a !default;
+
+$light: $gray-50 !default;
+$dark: $gray-800 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;
@@ -93,24 +105,6 @@ $body-color: $dark !default;
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;
 
-$light-black: rgba($dark, .24) !default;
-$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
-$light-white: rgba($light, .24) !default;
-
-$min-black: rgba($dark, .024) !default;
-$min-white: rgba(mix($light, $dark, 48%), .1) !default;
-
-$gray-50: #fbfbfb !default;
-$gray-100: $light !default;
-$gray-200: mix($light, $dark, 98%) !default;
-$gray-300: mix($light, $dark, 94%) !default;
-$gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 16%) !default;
-$gray-900: $dark !default;
-
 $blue: #206bc4 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
@@ -133,9 +127,15 @@ $text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)
 $border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
 $border-color-transparent: rgba($text-muted, $border-opacity) !default;
 
+$border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
+$border-color-light-transparent: rgba($text-muted, $border-light-opacity) !default;
+
 $border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
 $border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
 
+$border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
+$border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
+
 $active-bg: rgba($blue, .06) !default;
 $hover-bg: rgba($text-muted, .06) !default;
 
@@ -146,7 +146,32 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
-$code-color: $primary !default;
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark":  $dark,
+  "muted": $text-muted
+) !default;
+
+$extra-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,
+) !default;
 
 $social-colors: (
   "facebook": #3b5998,
@@ -166,25 +191,11 @@ $social-colors: (
   "tabler": #206bc4
 ) !default;
 
-$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,
-) !default;
-
-
 // Dark mode
 $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
+$dark-mode-border-color: lighten($dark, 8%) !default;
+$dark-mode-border-color-light: lighten($dark, 4%) !default;
 $dark-mode-text: $light;
 
 // Borders
@@ -194,7 +205,12 @@ $border-width-wide: 2px !default;
 $border-radius-sm: 2px !default;
 $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
-$border-radius-pill: 50% !default;
+$border-radius-pill: 100rem !default;
+
+// Code
+$code-color: $primary !default;
+$code-font-size: $small-font-size !default;
+$code-line-height: 1.25rem !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
@@ -227,8 +243,8 @@ $container-padding-x: 1.5rem !default;
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: $spacer * .25,
+  2: $spacer * .5,
   3: $spacer,
   4: $spacer * 2,
   5: $spacer * 4,
@@ -259,7 +275,7 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
-
+// Acpect ratios
 $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
@@ -270,16 +286,23 @@ $aspect-ratios: (
   "9x21": calc(21 / 9 * 100%),
 ) !default;
 
-// overlay
+// Shadows
+$shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+
+// Transitions
+$transition-time: .3s !default;
+
+// Overlay
 $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
 
 //accordion
+$accordion-bg: transparent !default;
 $accordion-border-color: $border-color-transparent !default;
 $accordion-icon-width: 1rem !default;
 
+$accordion-button-bg: transparent !default;
 $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
-
 $accordion-button-focus-border-color: $accordion-border-color !default;
 
 //alerts
@@ -305,10 +328,11 @@ $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
-$input-color: $body-color !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-padding-y: .5rem - .0625rem !default;
@@ -351,7 +375,7 @@ $card-spacer-x: 1rem !default;
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
 
-$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+$card-shadow: $shadow !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
 $cards-grid-gap: 1rem !default;
@@ -496,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;
@@ -515,10 +541,9 @@ $table-border-color: $border-color-transparent !default;
 $table-head-border-color: $border-color-transparent !default;
 $table-head-padding-y: .5rem !default;
 $table-head-color: $text-muted !default;
-$table-head-bg: $light !default;
+$table-head-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-striped-order: even !default;
-$table-striped-bg: $light !default;
-$table-accent-bg: $light !default;
+$table-striped-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-group-separator-color: $border-color-transparent !default;
 
 //toasts
@@ -537,6 +562,7 @@ $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
 $list-group-bg: inherit !default;
 
+$input-bg: $white !default;
 $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color-dark !default;
 $input-border-color-transparent: $border-color-dark-transparent !default;
@@ -576,8 +602,8 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
-$form-range-track-bg: $light-mix !default;
-$form-range-thumb-border: 2px solid $white !default;
+$form-range-track-bg: var(--#{$variable-prefix}border-color-light) !default;
+$form-range-thumb-border: 2px solid $form-range-track-bg !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
 
@@ -595,3 +621,9 @@ $flag-sizes: $avatar-sizes !default;
 //Payments
 $payment-sizes: $avatar-sizes !default;
 
+// Offcanvas
+$offcanvas-border-color: $border-color-transparent !default;
+
+// Placeholder
+$placeholder-opacity-min: .1 !default;
+$placeholder-opacity-max: .2 !default;

package/src/scss/demo/_examples.scss

@@ -79,8 +79,17 @@
 }
 
 @include dark-mode {
+  .example {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .example-content {
+    color: $dark-mode-text;
+  }
+
   .example-code {
-    border: 1px solid $border-color;
+    border-color: $dark-mode-border-color;
     border-top: none;
   }
 }

package/src/scss/demo.scss

@@ -85,8 +85,8 @@ $demo-icon-size: 7rem;
   height: $demo-icon-size;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-right: 1px solid var(--#{$variable-prefix}border-color);
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,3 +101,32 @@ $demo-icon-size: 7rem;
   }
 }
 
+
+//
+// Settings
+//
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: $shadow;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--#{$variable-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(--#{$variable-prefix}primary) 50%, $light 50%); }
+}