Release: 8.0.0

This commit is contained in:
k.pienkowska 2024-09-16 10:25:53 +02:00
parent e5d70a654d
commit afda5bb2de
16 changed files with 180 additions and 189 deletions

View File

@ -1,5 +1,5 @@
MDB5 MDB5
Version: FREE 7.3.2 Version: FREE 8.0.0
Documentation: Documentation:
https://mdbootstrap.com/docs/standard/ https://mdbootstrap.com/docs/standard/

26
css/mdb.dark.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

12
css/mdb.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

12
css/mdb.rtl.min.css vendored

File diff suppressed because one or more lines are too long

2
js/mdb.umd.min.js vendored
View File

@ -1,6 +1,6 @@
/*! /*!
* MDB5 * MDB5
* Version: FREE 7.3.2 * Version: FREE 8.0.0
* *
* *
* Copyright: Material Design for Bootstrap * Copyright: Material Design for Bootstrap

View File

@ -1,6 +1,6 @@
{ {
"name": "mdb-ui-kit", "name": "mdb-ui-kit",
"version": "7.3.2", "version": "8.0.0",
"type": "module", "type": "module",
"main": "./js/mdb.umd.min.js", "main": "./js/mdb.umd.min.js",
"module": "./js/mdb.es.min.js", "module": "./js/mdb.es.min.js",

View File

@ -1,23 +1,9 @@
/* eslint-disable */
import * as CSS from '../lib/css';
import * as DOM from '../lib/dom';
import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names'; import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
import updateGeometry from '../update-geometry'; import updateGeometry from '../update-geometry';
import { toInt } from '../lib/util';
export default function (i) { let activeSlider = null; // Variable to track the currently active slider
bindMouseScrollHandler(i, [
'containerWidth', export default function setupScrollHandlers(i) {
'contentWidth',
'pageX',
'railXWidth',
'scrollbarX',
'scrollbarXWidth',
'scrollLeft',
'x',
'scrollbarXRail',
]);
bindMouseScrollHandler(i, [ bindMouseScrollHandler(i, [
'containerHeight', 'containerHeight',
'contentHeight', 'contentHeight',
@ -29,70 +15,96 @@ export default function (i) {
'y', 'y',
'scrollbarYRail', 'scrollbarYRail',
]); ]);
bindMouseScrollHandler(i, [
'containerWidth',
'contentWidth',
'pageX',
'railXWidth',
'scrollbarX',
'scrollbarXWidth',
'scrollLeft',
'x',
'scrollbarXRail',
]);
} }
function bindMouseScrollHandler( function bindMouseScrollHandler(
i, i,
[ [
containerHeight, containerDimension,
contentHeight, contentDimension,
pageY, pageAxis,
railYHeight, railDimension,
scrollbarY, scrollbarAxis,
scrollbarYHeight, scrollbarDimension,
scrollTop, scrollAxis,
y, axis,
scrollbarYRail, scrollbarRail,
] ]
) { ) {
const element = i.element; const element = i.element;
let startingScrollPosition = null;
let startingScrollTop = null; let startingMousePagePosition = null;
let startingMousePageY = null;
let scrollBy = null; let scrollBy = null;
function mouseMoveHandler(e) { function moveHandler(e) {
if (e.touches && e.touches[0]) { if (e.touches && e.touches[0]) {
e[pageY] = e.touches[0].pageY; e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
} }
element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
addScrollingClass(i, y); // Only move if the active slider is the one we started with
if (activeSlider === scrollbarAxis) {
element[scrollAxis] =
startingScrollPosition + scrollBy * (e[pageAxis] - startingMousePagePosition);
addScrollingClass(i, axis);
updateGeometry(i); updateGeometry(i);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
function mouseUpHandler() {
removeScrollingClass(i, y);
i[scrollbarYRail].classList.remove(cls.state.clicking);
i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
} }
function bindMoves(e, touchMode) { function endHandler() {
startingScrollTop = element[scrollTop]; removeScrollingClass(i, axis);
if (touchMode && e.touches) { i[scrollbarRail].classList.remove(cls.state.clicking);
e[pageY] = e.touches[0].pageY; document.removeEventListener('mousemove', moveHandler);
document.removeEventListener('mouseup', endHandler);
document.removeEventListener('touchmove', moveHandler);
document.removeEventListener('touchend', endHandler);
activeSlider = null; // Reset active slider when interaction ends
} }
startingMousePageY = e[pageY];
scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]); function bindMoves(e) {
if (!touchMode) { if (activeSlider === null) {
i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler); // Only bind if no slider is currently active
i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler); activeSlider = scrollbarAxis; // Set current slider as active
e.preventDefault();
startingScrollPosition = element[scrollAxis];
if (e.touches) {
e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
}
startingMousePagePosition = e[pageAxis];
scrollBy =
(i[contentDimension] - i[containerDimension]) / (i[railDimension] - i[scrollbarDimension]);
if (!e.touches) {
document.addEventListener('mousemove', moveHandler);
document.addEventListener('mouseup', endHandler);
} else { } else {
i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler); document.addEventListener('touchmove', moveHandler, { passive: false });
document.addEventListener('touchend', endHandler);
} }
i[scrollbarYRail].classList.add(cls.state.clicking); i[scrollbarRail].classList.add(cls.state.clicking);
}
e.stopPropagation(); e.stopPropagation();
if (e.cancelable) {
e.preventDefault();
}
} }
i.event.bind(i[scrollbarY], 'mousedown', (e) => { i[scrollbarAxis].addEventListener('mousedown', bindMoves);
bindMoves(e); i[scrollbarAxis].addEventListener('touchstart', bindMoves);
});
i.event.bind(i[scrollbarY], 'touchstart', (e) => {
bindMoves(e, true);
});
} }

View File

@ -1,4 +1,3 @@
/* eslint-disable */
import updateGeometry from '../update-geometry'; import updateGeometry from '../update-geometry';
import cls from '../lib/class-names'; import cls from '../lib/class-names';
import * as CSS from '../lib/css'; import * as CSS from '../lib/css';
@ -11,6 +10,13 @@ export default function (i) {
const element = i.element; const element = i.element;
const state = {
startOffset: {},
startTime: 0,
speed: {},
easingLoop: null,
};
function shouldPrevent(deltaX, deltaY) { function shouldPrevent(deltaX, deltaY) {
const scrollTop = Math.floor(element.scrollTop); const scrollTop = Math.floor(element.scrollTop);
const scrollLeft = element.scrollLeft; const scrollLeft = element.scrollLeft;
@ -18,18 +24,13 @@ export default function (i) {
const magnitudeY = Math.abs(deltaY); const magnitudeY = Math.abs(deltaY);
if (magnitudeY > magnitudeX) { if (magnitudeY > magnitudeX) {
// user is perhaps trying to swipe up/down the page
if ( if (
(deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) || (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
(deltaY > 0 && scrollTop === 0) (deltaY > 0 && scrollTop === 0)
) { ) {
// set prevent for mobile Chrome refresh
return window.scrollY === 0 && deltaY > 0 && env.isChrome; return window.scrollY === 0 && deltaY > 0 && env.isChrome;
} }
} else if (magnitudeX > magnitudeY) { } else if (magnitudeX > magnitudeY) {
// user is perhaps trying to swipe left/right across the page
if ( if (
(deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) || (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
(deltaX > 0 && scrollLeft === 0) (deltaX > 0 && scrollLeft === 0)
@ -48,21 +49,18 @@ export default function (i) {
updateGeometry(i); updateGeometry(i);
} }
let startOffset = {};
let startTime = 0;
let speed = {};
let easingLoop = null;
function getTouch(e) { function getTouch(e) {
if (e.targetTouches) { if (e.targetTouches) {
return e.targetTouches[0]; return e.targetTouches[0];
} else { }
// Maybe IE pointer // Maybe IE pointer
return e; return e;
} }
}
function shouldHandle(e) { function shouldHandle(e) {
if (e.target === i.scrollbarX || e.target === i.scrollbarY) {
return false;
}
if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) { if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
return false; return false;
} }
@ -82,13 +80,13 @@ export default function (i) {
const touch = getTouch(e); const touch = getTouch(e);
startOffset.pageX = touch.pageX; state.startOffset.pageX = touch.pageX;
startOffset.pageY = touch.pageY; state.startOffset.pageY = touch.pageY;
startTime = new Date().getTime(); state.startTime = new Date().getTime();
if (easingLoop !== null) { if (state.easingLoop !== null) {
clearInterval(easingLoop); clearInterval(state.easingLoop);
} }
} }
@ -143,53 +141,57 @@ export default function (i) {
const currentOffset = { pageX: touch.pageX, pageY: touch.pageY }; const currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
const differenceX = currentOffset.pageX - startOffset.pageX; const differenceX = currentOffset.pageX - state.startOffset.pageX;
const differenceY = currentOffset.pageY - startOffset.pageY; const differenceY = currentOffset.pageY - state.startOffset.pageY;
if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) { if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
return; return;
} }
applyTouchMove(differenceX, differenceY); applyTouchMove(differenceX, differenceY);
startOffset = currentOffset; state.startOffset = currentOffset;
const currentTime = new Date().getTime(); const currentTime = new Date().getTime();
const timeGap = currentTime - startTime; const timeGap = currentTime - state.startTime;
if (timeGap > 0) { if (timeGap > 0) {
speed.x = differenceX / timeGap; state.speed.x = differenceX / timeGap;
speed.y = differenceY / timeGap; state.speed.y = differenceY / timeGap;
startTime = currentTime; state.startTime = currentTime;
} }
if (shouldPrevent(differenceX, differenceY)) { if (shouldPrevent(differenceX, differenceY)) {
// Prevent the default behavior if the event is cancelable
if (e.cancelable) {
e.preventDefault(); e.preventDefault();
} }
} }
} }
}
function touchEnd() { function touchEnd() {
if (i.settings.swipeEasing) { if (i.settings.swipeEasing) {
clearInterval(easingLoop); clearInterval(state.easingLoop);
easingLoop = setInterval(function () { state.easingLoop = setInterval(() => {
if (i.isInitialized) { if (i.isInitialized) {
clearInterval(easingLoop); clearInterval(state.easingLoop);
return; return;
} }
if (!speed.x && !speed.y) { if (!state.speed.x && !state.speed.y) {
clearInterval(easingLoop); clearInterval(state.easingLoop);
return; return;
} }
if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { if (Math.abs(state.speed.x) < 0.01 && Math.abs(state.speed.y) < 0.01) {
clearInterval(easingLoop); clearInterval(state.easingLoop);
return; return;
} }
applyTouchMove(speed.x * 30, speed.y * 30); applyTouchMove(state.speed.x * 30, state.speed.y * 30);
speed.x *= 0.8; state.speed.x *= 0.8;
speed.y *= 0.8; state.speed.y *= 0.8;
}, 10); }, 10);
} }
} }

View File

@ -1,13 +1,3 @@
/*!
* # Semantic UI 2.4.2 - Flag
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/******************************* /*******************************
Flag Flag
*******************************/ *******************************/

View File

@ -54,6 +54,7 @@
.nav-pills { .nav-pills {
margin-left: -$nav-pills-margin; margin-left: -$nav-pills-margin;
margin-right: -$nav-pills-margin;
.nav-link { .nav-link {
--#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius}; --#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};

View File

@ -4,3 +4,54 @@
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }
.progress-circular {
--#{$prefix}progress-circular-size: #{$progress-circular-size};
--#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
--#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
position: relative;
width: var(--#{$prefix}progress-circular-size);
height: var(--#{$prefix}progress-circular-size);
background-color: transparent;
display: inline-block;
.progress-bar {
background-color: var(--#{$prefix}progress-bar-bg);
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
background: conic-gradient(
transparent calc(var(--percentage) * 1%),
var(--#{$prefix}progress-bg) 0%
);
-webkit-mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
);
mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
);
background-color: inherit;
}
.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--#{$prefix}progress-circular-color);
}
}

View File

@ -1561,6 +1561,8 @@ $alert-border-radius: $border-radius-lg !default;
// scss-docs-start progress-variables // scss-docs-start progress-variables
$progress-height: 4px !default; $progress-height: 4px !default;
$progress-bar-color: color-contrast($primary) !default; $progress-bar-color: color-contrast($primary) !default;
$progress-circular-size: 48px !default;
$progress-circular-bar-width: 4px !default;
// scss-docs-end progress-variables // scss-docs-end progress-variables
// Range // Range

View File

@ -89,9 +89,11 @@
box-shadow: 0 1px 0 0 $color; box-shadow: 0 1px 0 0 $color;
} }
&:focus ~ .form-notch .form-notch-leading { &:focus ~ .form-notch .form-notch-leading {
border-color: $color;
box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color; box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
} }
&:focus ~ .form-notch .form-notch-trailing { &:focus ~ .form-notch .form-notch-trailing {
border-color: $color;
box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color; box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
} }