Skip to content

Commit 89ee40e

Browse files
smolenski-mikolajsmolenski-mikolaj
committed
Release 3.2.0
1 parent 2f40a93 commit 89ee40e

File tree

169 files changed

+5781
-3814
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

169 files changed

+5781
-3814
lines changed

‎License.pdf

252 KB
Binary file not shown.

‎README.txt

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
MDB 5 Vue
22

3-
Version: FREE 3.1.1
3+
Version: FREE 3.2.0
44

55
Documentation:
6-
https://mdbootstrap.com/docs/vue/
6+
https://mdbootstrap.com/docs/b5/vue/
77

88
Installation:
9-
https://mdbootstrap.com/docs/vue/getting-started/installation/
9+
https://mdbootstrap.com/docs/b5/vue/getting-started/installation/
1010

1111
CLI & hosting:
12-
https://mdbgo.com/
12+
https://mdbootstrap.com/docs/standard/cli/
1313

1414
Support:
15-
https://mdbootstrap.com/support/cat/vue/
15+
https://mdbootstrap.com/support/cat/vue/

‎css/mdb.dark.min.css

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.dark.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.dark.rtl.min.css

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.min.css

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/mdb.rtl.min.css

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/mdb.es.min.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -1483,12 +1483,14 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
14831483
}
14841484
});
14851485
let isCollapsing = false;
1486+
const emitInterval = ref(0);
14861487
watch(
14871488
() => props.modelValue,
1488-
(cur, prev) => {
1489+
(cur) => {
14891490
if (isCollapsing) {
1490-
setTimeout(() => {
1491-
emit("update:modelValue", prev);
1491+
clearInterval(emitInterval.value);
1492+
emitInterval.value = setTimeout(() => {
1493+
emit("update:modelValue", isActive.value);
14921494
}, props.duration);
14931495
return;
14941496
}
@@ -1544,6 +1546,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
15441546
} else {
15451547
el.style.height = "0";
15461548
}
1549+
el.style.transitionDuration = props.duration + "ms";
15471550
isCollapsing = true;
15481551
};
15491552
const enter = (el) => {
@@ -1618,8 +1621,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
16181621
onLeave: leave,
16191622
onAfterLeave: afterLeave,
16201623
"enter-active-class": "collapsing",
1621-
"leave-active-class": "collapsing show",
1622-
duration: __props.duration
1624+
"leave-active-class": "collapsing show"
16231625
}, {
16241626
default: withCtx(() => [
16251627
withDirectives((openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
@@ -1637,7 +1639,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
16371639
])
16381640
]),
16391641
_: 3
1640-
}, 8, ["duration"]);
1642+
});
16411643
};
16421644
}
16431645
});
@@ -3952,7 +3954,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
39523954
return;
39533955
}
39543956
setTimeout(() => {
3955-
popperEl.value.classList.remove("show");
3957+
popperEl.value && popperEl.value.classList.remove("show");
39563958
}, 10);
39573959
isThrottled.value = true;
39583960
setTimeout(() => {

‎js/mdb.umd.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-vue-ui-kit",
3-
"version": "3.1.1",
3+
"version": "3.2.0",
44
"type": "module",
55
"main": "js/mdb.umd.min.js",
66
"module": "js/mdb.es.min.js",

‎src/components/free/components/MDBCollapse.vue

+7-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
@after-leave="afterLeave"
99
enter-active-class="collapsing"
1010
leave-active-class="collapsing show"
11-
:duration="duration"
1211
>
1312
<component
1413
v-show="isActive"
@@ -132,12 +131,15 @@ onMounted(() => {
132131
});
133132
134133
let isCollapsing = false;
134+
const emitInterval = ref(0);
135+
135136
watch(
136137
() => props.modelValue,
137-
(cur, prev) => {
138+
(cur) => {
138139
if (isCollapsing) {
139-
setTimeout(() => {
140-
emit("update:modelValue", prev);
140+
clearInterval(emitInterval.value);
141+
emitInterval.value = setTimeout(() => {
142+
emit("update:modelValue", isActive.value);
141143
}, props.duration);
142144
return;
143145
}
@@ -210,6 +212,7 @@ const beforeEnter = (el: HTMLElement) => {
210212
} else {
211213
el.style.height = "0";
212214
}
215+
el.style.transitionDuration = props.duration + "ms";
213216
isCollapsing = true;
214217
};
215218
const enter = (el: HTMLElement) => {

‎src/components/free/components/MDBTooltip.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ watchEffect(() => {
170170
return;
171171
}
172172
setTimeout(() => {
173-
popperEl.value.classList.remove("show");
173+
popperEl.value && popperEl.value.classList.remove("show");
174174
}, 10);
175175
176176
isThrottled.value = true;

‎src/scss/free/_popovers.scss

+4
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,7 @@
8282
border-width: 10px 0 10px 10px;
8383
border-color: transparent transparent transparent white;
8484
}
85+
86+
.popover {
87+
position: absolute;
88+
}

‎src/scss/free/_tooltips.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88

99
.tooltip[data-popper-placement^="top"] .tooltip_arrow {
1010
border-width: 5px 5px 0 5px;
11-
border-color: $tooltip-inner-background-color transparent transparent
12-
transparent;
11+
border-color: $tooltip-bg transparent transparent transparent;
1312
bottom: -5px;
1413
left: calc(50% - 5px);
1514
margin-top: 0;
@@ -19,8 +18,7 @@
1918

2019
.tooltip[data-popper-placement^="bottom"] .tooltip_arrow {
2120
border-width: 0 5px 5px 5px;
22-
border-color: transparent transparent $tooltip-inner-background-color
23-
transparent;
21+
border-color: transparent transparent $tooltip-bg transparent;
2422
top: -5px;
2523
left: calc(50% - 5px);
2624
margin-top: 0;
@@ -30,8 +28,7 @@
3028

3129
.tooltip[data-popper-placement^="right"] .tooltip_arrow {
3230
border-width: 5px 5px 5px 0;
33-
border-color: transparent $tooltip-inner-background-color transparent
34-
transparent;
31+
border-color: transparent $tooltip-bg transparent transparent;
3532
left: -5px;
3633
top: calc(50% - 5px);
3734
margin-left: 0;
@@ -41,8 +38,7 @@
4138

4239
.tooltip[data-popper-placement^="left"] .tooltip_arrow {
4340
border-width: 5px 0 5px 5px;
44-
border-color: transparent transparent transparent
45-
$tooltip-inner-background-color;
41+
border-color: transparent transparent transparent $tooltip-bg;
4642
right: -5px;
4743
top: calc(50% - 5px);
4844
margin-left: 0;
@@ -59,3 +55,7 @@
5955
.fade-leave-from {
6056
opacity: 1;
6157
}
58+
59+
.tooltip {
60+
position: absolute;
61+
}

‎src/scss/standard/bootstrap-rtl-fix/_accordion.scss

+57-25
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,71 @@
22
// Base styles
33
//
44

5+
.accordion {
6+
// scss-docs-start accordion-css-vars
7+
--#{$prefix}accordion-color: #{$accordion-color};
8+
--#{$prefix}accordion-bg: #{$accordion-bg};
9+
--#{$prefix}accordion-transition: #{$accordion-transition};
10+
--#{$prefix}accordion-border-color: #{$accordion-border-color};
11+
--#{$prefix}accordion-border-width: #{$accordion-border-width};
12+
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
13+
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
14+
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
15+
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16+
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
17+
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
18+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
19+
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
20+
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
21+
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
22+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
23+
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
24+
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
25+
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
26+
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
27+
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
28+
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
29+
// scss-docs-end accordion-css-vars
30+
}
31+
532
.accordion-button {
633
position: relative;
734
display: flex;
835
align-items: center;
936
width: 100%;
10-
padding: $accordion-button-padding-y $accordion-button-padding-x;
37+
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
1138
@include font-size($font-size-base);
12-
color: $accordion-button-color;
39+
color: var(--#{$prefix}accordion-btn-color);
1340
text-align: left; // Reset button style
14-
background-color: $accordion-button-bg;
41+
background-color: var(--#{$prefix}accordion-btn-bg);
1542
border: 0;
1643
@include border-radius(0);
1744
overflow-anchor: none;
18-
@include transition($accordion-transition);
45+
@include transition(var(--#{$prefix}accordion-transition));
1946

2047
&:not(.collapsed) {
21-
color: $accordion-button-active-color;
22-
background-color: $accordion-button-active-bg;
23-
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
48+
color: var(--#{$prefix}accordion-active-color);
49+
background-color: var(--#{$prefix}accordion-active-bg);
50+
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0
51+
var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
2452

2553
&::after {
26-
background-image: escape-svg($accordion-button-active-icon);
27-
transform: $accordion-icon-transform;
54+
background-image: var(--#{$prefix}accordion-btn-active-icon);
55+
transform: var(--#{$prefix}accordion-btn-icon-transform);
2856
}
2957
}
3058

3159
// Accordion icon
3260
&::after {
3361
flex-shrink: 0;
34-
width: $accordion-icon-width;
35-
height: $accordion-icon-width;
62+
width: var(--#{$prefix}accordion-btn-icon-width);
63+
height: var(--#{$prefix}accordion-btn-icon-width);
3664
margin-left: auto;
3765
content: '';
38-
background-image: escape-svg($accordion-button-icon);
66+
background-image: var(--#{$prefix}accordion-btn-icon);
3967
background-repeat: no-repeat;
40-
background-size: $accordion-icon-width;
41-
@include transition($accordion-icon-transition);
68+
background-size: var(--#{$prefix}accordion-btn-icon-width);
69+
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
4270
}
4371

4472
&:hover {
@@ -47,9 +75,9 @@
4775

4876
&:focus {
4977
z-index: 3;
50-
border-color: $accordion-button-focus-border-color;
78+
border-color: var(--#{$prefix}accordion-btn-focus-border-color);
5179
outline: 0;
52-
box-shadow: $accordion-button-focus-box-shadow;
80+
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
5381
}
5482
}
5583

@@ -58,14 +86,15 @@
5886
}
5987

6088
.accordion-item {
61-
background-color: $accordion-bg;
62-
border: $accordion-border-width solid $accordion-border-color;
89+
color: var(--#{$prefix}accordion-color);
90+
background-color: var(--#{$prefix}accordion-bg);
91+
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
6392

6493
&:first-of-type {
65-
@include border-top-radius($accordion-border-radius);
94+
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
6695

6796
.accordion-button {
68-
@include border-top-radius($accordion-inner-border-radius);
97+
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
6998
}
7099
}
71100

@@ -75,22 +104,22 @@
75104

76105
// Only set a border-radius on the last item if the accordion is collapsed
77106
&:last-of-type {
78-
@include border-bottom-radius($accordion-border-radius);
107+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
79108

80109
.accordion-button {
81110
&.collapsed {
82-
@include border-bottom-radius($accordion-inner-border-radius);
111+
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
83112
}
84113
}
85114

86115
.accordion-collapse {
87-
@include border-bottom-radius($accordion-border-radius);
116+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
88117
}
89118
}
90119
}
91120

92121
.accordion-body {
93-
padding: $accordion-body-padding-y $accordion-body-padding-x;
122+
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
94123
}
95124

96125
// Flush accordion items
@@ -115,7 +144,10 @@
115144
}
116145

117146
.accordion-button {
118-
@include border-radius(0);
147+
&,
148+
&.collapsed {
149+
@include border-radius(0);
150+
}
119151
}
120152
}
121153
}

‎src/scss/standard/bootstrap-rtl-fix/_alert.scss

+18-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,24 @@
33
//
44

55
.alert {
6+
// scss-docs-start alert-css-vars
7+
--#{$prefix}alert-bg: transparent;
8+
--#{$prefix}alert-padding-x: #{$alert-padding-x};
9+
--#{$prefix}alert-padding-y: #{$alert-padding-y};
10+
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
11+
--#{$prefix}alert-color: inherit;
12+
--#{$prefix}alert-border-color: transparent;
13+
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14+
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
// scss-docs-end alert-css-vars
16+
617
position: relative;
7-
padding: $alert-padding-y $alert-padding-x;
8-
margin-bottom: $alert-margin-bottom;
9-
border: $alert-border-width solid transparent;
10-
@include border-radius($alert-border-radius);
18+
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
19+
margin-bottom: var(--#{$prefix}alert-margin-bottom);
20+
color: var(--#{$prefix}alert-color);
21+
background-color: var(--#{$prefix}alert-bg);
22+
border: var(--#{$prefix}alert-border);
23+
@include border-radius(var(--#{$prefix}alert-border-radius));
1124
}
1225

1326
// Headings for larger alerts
@@ -45,6 +58,7 @@
4558
$alert-background: shift-color($value, $alert-bg-scale);
4659
$alert-border: shift-color($value, $alert-border-scale);
4760
$alert-color: shift-color($value, $alert-color-scale);
61+
4862
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
4963
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
5064
}

0 commit comments

Comments
 (0)