Skip to content

Commit cb95f05

Browse files
ahmadfajarahmadfajar
committed
- BsSideDrawer: improve collapse animation if used together with <BsAppbar>.
- BsLightbox: add image preloader to improve performance - SCSS: update deprecated builtin function - Update CHANGELOG.md and package.json - Improve Typescript declaration - Bump to version 2.0.12
1 parent 626b33a commit cb95f05

File tree

21 files changed

+120
-85
lines changed

21 files changed

+120
-85
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
> All notable changes to this project will be documented in this file.
44
55

6+
## v2.0.12
7+
8+
Released: September 20, 2024
9+
10+
### Features & Improvements
11+
12+
- **BsLightbox**: improve image loading using preloader
13+
- **BsSideDrawer**: improve collapse animation if used together with `<BsAppbar>`.
14+
15+
616
## v2.0.11
717

818
Released: September 08, 2024

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-mdbootstrap",
3-
"version": "2.0.11",
3+
"version": "2.0.12",
44
"description": "Bootstrap5 Material Design Components for Vue.js",
55
"author": {
66
"name": "Ahmad Fajar",
@@ -68,7 +68,7 @@
6868
"lodash": "^4.17.21",
6969
"luxon": "^3.5.0",
7070
"resize-observer-polyfill": "^1.5.1",
71-
"vue": "^3.5.3"
71+
"vue": "^3.5.6"
7272
},
7373
"devDependencies": {
7474
"@rollup/plugin-node-resolve": "^15.2.3",
@@ -77,19 +77,19 @@
7777
"@types/body-scroll-lock": "^3.1.2",
7878
"@types/lodash": "^4.17.7",
7979
"@types/luxon": "^3.4.2",
80-
"@types/node": "^22.5.4",
80+
"@types/node": "^22.5.5",
8181
"@vue/tsconfig": "^0.5.1",
8282
"bootstrap": "5.2.3",
8383
"clean-css-cli": "^5.6.3",
8484
"compass-mixins": "^0.12.12",
8585
"npm-run-all": "^4.1.5",
8686
"rimraf": "^6.0.1",
8787
"rollup-plugin-dts": "^6.1.1",
88-
"sass": "^1.78.0",
89-
"terser": "^5.31.6",
90-
"typescript": "^5.5.4",
91-
"vite": "^5.4.3",
92-
"vue-router": "^4.4.3"
88+
"sass": "^1.79.1",
89+
"terser": "^5.33.0",
90+
"typescript": "^5.6.2",
91+
"vite": "^5.4.6",
92+
"vue-router": "^4.4.5"
9393
},
9494
"browserslist": [
9595
"> 5%",

‎scss/_banner.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Vue MDBootstrap v2.0.11
2+
* Vue MDBootstrap v2.0.12
33
* Released under the BSD-3 License.
44
* Copyright Ahmad Fajar (https://ahmadfajar.github.io).
55
*/

‎scss/_colors.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
// Gray Colors
24
$gray-100: #f8f9fa;
35
$gray-200: #e9ecef;
@@ -705,7 +707,7 @@ $theme-colors: (
705707
"brown": $brown-base,
706708
"cyan": $cyan-base,
707709
"dark-blue": $blue-darken-4,
708-
"dark-green": lighten($green-darken-4, 2%),
710+
"dark-green": color.adjust($green-darken-4, $lightness: 2%),
709711
"deep-orange": $deep-orange-base,
710712
"deep-purple": $deep-purple-base,
711713
"green": $green-base,

‎scss/_functions.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,27 +28,27 @@
2828
}
2929
} @else if (brightness($color) > $brightnessLevel) {
3030
@if ($transparency > 0) {
31-
@return rgba(darken($color, 35%), $transparency + 0.1);
31+
@return rgba(color.adjust($color, $lightness: -35%), $transparency + 0.1);
3232
} @else {
33-
@return rgba(darken($color, 25%), .2);
33+
@return rgba(color.adjust($color, $lightness: -25%), .2);
3434
}
3535
} @else {
3636
@if ($transparency > 0) {
37-
@return rgba(lighten($color, 30%), $transparency + 0.1);
37+
@return rgba(color.adjust($color, $lightness: 30%), $transparency + 0.1);
3838
} @else {
39-
@return rgba(lighten($color, 25%), .2);
39+
@return rgba(color.adjust($color, $lightness: 25%), .2);
4040
}
4141
}
4242
}
4343

4444
@function brightness($color) {
45-
$red: color.red($color) * 299;
46-
$green: color.green($color) * 587;
47-
$blue: color.blue($color) * 114;
45+
$red: color.channel($color, "red") * 299;
46+
$green: color.channel($color, "green") * 587;
47+
$blue: color.channel($color, "blue") * 114;
4848

4949
@return math.div(($red + $green + $blue), 1000);
5050
}
5151

5252
@function to-rgb($value) {
53-
@return color.red($value), color.green($value), color.blue($value);
53+
@return color.channel($value, "red"), color.channel($value, "green"), color.channel($value, "blue");
5454
}

‎scss/mixins/_alert.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
/* BsAlert variants mixins -- sass variables */
24

35
@mixin alert-variant($name, $background, $border, $color) {
@@ -6,7 +8,7 @@
68
--#{$bs-prefix}alert-border-color: #{$border};
79
--#{$bs-prefix}alert-color: #{$color};
810

9-
$hr-border-color: darken($border, 10%);
11+
$hr-border-color: color.adjust($border, $lightness: -10%);
1012
--#{$bs-prefix}alert-hr-color: #{$hr-border-color};
1113

1214
$link-color: mix(black, $color, 20%);
@@ -16,10 +18,10 @@
1618

1719
@mixin make-outline-alert-variant($name, $color) {
1820
.#{$prefix}alert-outline-#{$name} {
19-
$border-color: lighten($color, 15%);
20-
$hr-border-color: darken($color, 5%);
21-
$link-color: darken($color, 10%);
22-
$text-color: darken($color, 5%);
21+
$border-color: color.adjust($color, $lightness: 15%);
22+
$hr-border-color: color.adjust($color, $lightness: -5%);
23+
$link-color: color.adjust($color, $lightness: -10%);
24+
$text-color: color.adjust($color, $lightness: -5%);
2325

2426
--#{$bs-prefix}alert-color: #{$text-color};
2527
--#{$bs-prefix}alert-border-color: #{$border-color};
@@ -31,7 +33,7 @@
3133
@mixin make-solid-alert-variant($name, $color) {
3234
.#{$prefix}alert-solid-#{$name} {
3335
$text-color: set-color-contrast($color, $gray-900, $white);
34-
$hr-border-color: set-color-contrast($color, darken($color, 25%), rgba(darken($white, 4%), .65));
36+
$hr-border-color: set-color-contrast($color, color.adjust($color, $lightness: -25%), rgba(color.adjust($white, $lightness: -4%), .65));
3537

3638
--#{$bs-prefix}alert-bg: #{$color};
3739
--#{$bs-prefix}alert-color: #{$text-color};

‎scss/mixins/_button.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,16 @@
6363

6464
@mixin make-outline-button-variant($name, $color) {
6565
.btn-outline-#{$name} {
66-
$active-box-shadow-color-rgb: to-rgb(lighten($color, 5%));
67-
$border-color: lighten($gray-600, 25%);
66+
$active-box-shadow-color-rgb: to-rgb(color.adjust($color, $lightness: 5%));
67+
$border-color: color.adjust($gray-600, $lightness: 25%);
6868
--#{$bs-prefix}btn-bg: transparent;
6969
--#{$bs-prefix}btn-border-color: #{$border-color};
7070
--#{$bs-prefix}btn-border-width: thin;
7171
--#{$bs-prefix}btn-focus-shadow-rgb: #{$active-box-shadow-color-rgb};
7272

7373
@if ($name == 'light' or $name == 'light-grey') {
7474
$active-bg-rgba: rgba($border-color, .2);
75-
$active-border-color-rgba: darken($border-color, 8%);
75+
$active-border-color-rgba: color.adjust($border-color, $lightness: -8%);
7676
--#{$bs-prefix}btn-color: #{$gray-600};
7777
--#{$bs-prefix}btn-active-bg: #{$active-bg-rgba};
7878
--#{$bs-prefix}btn-active-color: #{$gray-800};
@@ -85,7 +85,7 @@
8585
$active-color: set-color-contrast($active-bg-rgba, color.scale($color, $lightness: -70%), $white, 100);
8686
$hover-bg-rgba: rgba(color.scale($color, $lightness: 45%), .35);
8787
$hover-color-rgba: set-color-contrast($active-bg-rgba, $white, color.scale($color, $lightness: -30%), 220);
88-
$hover-border-color: lighten($color, 10%);
88+
$hover-border-color: color.adjust($color, $lightness: 10%);
8989
--#{$bs-prefix}btn-color: #{$color};
9090
--#{$bs-prefix}btn-active-bg: #{$active-bg-rgba};
9191
--#{$bs-prefix}btn-active-color: #{$active-color};

‎scss/mixins/_chip.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@
55
@mixin make-chip-variant($name, $color) {
66
.#{$prefix}chip-#{$name} {
77
$chip-color: set-color-contrast($color, rgba(color.scale($color, $lightness: 20%), .55), rgba(color.scale($color, $lightness: 30%), .55));
8-
$icon-color: darken($color, 5%);
8+
$icon-color: color.adjust($color, $lightness: -5%);
99
$hover-bg: color.scale($chip-color, $lightness: -25%);
1010
$active-bg: color.scale($color, $lightness: 10%);
1111
$active-color: set-color-contrast($active-bg, $black, $white);
1212
$active-box-shadow-color-rgb: to-rgb($chip-color);
1313
$active-icon-color: set-color-contrast($active-bg, color.scale($chip-color, $lightness: -25%), $white);
1414

1515
@if($name == 'light') {
16-
$light-bg-color: darken($color, 2.5%);
17-
$light-hover-bg: darken($color, 10%);
18-
$light-active-bg: darken($color, 15%);
16+
$light-bg-color: color.adjust($color, $lightness: -2.5%);
17+
$light-hover-bg: color.adjust($color, $lightness: -10%);
18+
$light-active-bg: color.adjust($color, $lightness: -15%);
1919
--#{$prefix}chip-bg: #{$light-bg-color};
2020
--#{$prefix}chip-active-bg: #{$light-active-bg};
2121
--#{$prefix}chip-hover-bg: #{$light-hover-bg};
2222
--#{$prefix}chip-border-color: #{$light-bg-color};
2323
} @else if($name == 'light-grey') {
24-
$light-bg-color: lighten($color, 2.5%);
25-
$light-hover-bg: rgba(darken($color, 10%), .55);
24+
$light-bg-color: color.adjust($color, $lightness: 2.5%);
25+
$light-hover-bg: rgba(color.adjust($color, $lightness: -10%), .55);
2626
--#{$prefix}chip-bg: #{$light-bg-color};
2727
--#{$prefix}chip-active-bg: #{$active-bg};
2828
--#{$prefix}chip-hover-bg: #{$light-hover-bg};
@@ -48,19 +48,19 @@
4848

4949
@mixin make-chip-outline-variant($name, $color) {
5050
.#{$prefix}chip-outline-#{$name} {
51-
$border-color: lighten($gray-600, 25%);
52-
$hover-bg: set-color-contrast($color, rgba(darken($color, 10%), .4), rgba(lighten($color, 20%), .2), 200);
53-
$hover-border: set-color-contrast($color, $border-color, lighten($color, 12%));
51+
$border-color: color.adjust($gray-600, $lightness: 25%);
52+
$hover-bg: set-color-contrast($color, rgba(color.adjust($color, $lightness: -10%), .4), rgba(color.adjust($color, $lightness: 20%), .2), 200);
53+
$hover-border: set-color-contrast($color, $border-color, color.adjust($color, $lightness: 12%));
5454
$hover-color: set-color-contrast($color, $white, color.scale($color, $lightness: -40%), 210);
5555
$active-bg: set-color-contrast($color, rgba(color.scale($color, $lightness: -10%), .4), rgba(color.scale($color, $lightness: 15%), .3), 200);
5656
$active-color: set-color-contrast($color, $white, color.scale($color, $lightness: -40%), 210);
57-
$focus-border: set-color-contrast($color, darken($border-color, 15%), $color);
58-
$active-box-shadow-color-rgb: to-rgb(lighten($hover-bg, 10%));
57+
$focus-border: set-color-contrast($color, color.adjust($border-color, $lightness: -15%), $color);
58+
$active-box-shadow-color-rgb: to-rgb(color.adjust($hover-bg, $lightness: 10%));
5959

6060
@if($name == 'grey' or $name == 'secondary') {
61-
$hover-bg-alt: rgba(darken($color, 2%), .3);
62-
$active-bg-alt: rgba(darken($color, 6%), .3);
63-
$active-border: set-color-contrast($color, $color, rgba(lighten($color, 20%), .1));
61+
$hover-bg-alt: rgba(color.adjust($color, $lightness: -2%), .3);
62+
$active-bg-alt: rgba(color.adjust($color, $lightness: -6%), .3);
63+
$active-border: set-color-contrast($color, $color, rgba(color.adjust($color, $lightness: 20%), .1));
6464
--#{$prefix}chip-color: #{$gray-800};
6565
--#{$prefix}chip-hover-bg: #{$hover-bg-alt};
6666
--#{$prefix}chip-hover-color: #{$gray-900};

‎scss/mixins/_listview.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
@mixin make-listview-variant($name, $color) {
77
.#{$prefix}list-#{$name} {
8-
$subheader-color: set-color-contrast($color, rgba(lighten($gray-900, 5%), .6), rgba($white, .6));
8+
$subheader-color: set-color-contrast($color, rgba(color.adjust($gray-900, $lightness: 5%), .6), rgba($white, .6));
99

1010
--#{$prefix}listview-bg: #{$color};
1111
--#{$prefix}subheader-color: #{$subheader-color};
@@ -24,7 +24,7 @@
2424

2525
@mixin make-list-tile-variant($name, $color) {
2626
.#{$prefix}list-#{$name} {
27-
$tile-hover-bg: set-color-contrast($color, $default-hover-bgcolor, set-color-contrast($color, rgba(darken($color, 30%), .25), rgba(darken($color, 20%), .25), 160), 220);
27+
$tile-hover-bg: set-color-contrast($color, $default-hover-bgcolor, set-color-contrast($color, rgba(color.adjust($color, $lightness: -30%), .25), rgba(color.adjust($color, $lightness: -20%), .25), 160), 220);
2828
$tile-active-bg: set-alt-bgcolor($color, .2);
2929

3030
@if($name == "black") {
@@ -35,13 +35,13 @@
3535
$tile-title-color: set-color-contrast($color, $gray-900, $white);
3636
$tile-subtitle-color: set-color-contrast($color, $gray-700, rgba($white, .7));
3737
$tile-leading-color: set-color-contrast($color, rgba($black, .54), rgba($white, .6));
38-
$tile-active-title-color: set-color-contrast($color, darken($default-active-bgcolor, 20%), $white, 220);
39-
$tile-active-subtitle-color: set-color-contrast($color, darken($default-active-bgcolor, 10%), rgba($white, .77), 220);
38+
$tile-active-title-color: set-color-contrast($color, color.adjust($default-active-bgcolor, $lightness: -20%), $white, 220);
39+
$tile-active-subtitle-color: set-color-contrast($color, color.adjust($default-active-bgcolor, $lightness: -10%), rgba($white, .77), 220);
4040
$tile-active-leading-icon-color: set-color-contrast($color, rgba($default-active-bgcolor, .54), rgba($white, .75), 220);
4141
$tile-disable-title-color: set-color-contrast($color, rgba($black, .5), rgba($white, .4));
4242
$tile-disable-subtitle-color: $tile-disable-title-color;
4343
$tile-disable-leading-color: $tile-disable-title-color;
44-
$tile-indicator-border-color: set-color-contrast($color, darken($mdb-default-color, 5%), lighten(set-alt-bgcolor($color, .65), 45%), 220);
44+
$tile-indicator-border-color: set-color-contrast($color, color.adjust($mdb-default-color, $lightness: -5%), color.adjust(set-alt-bgcolor($color, .65), $lightness: 45%), 220);
4545

4646
.#{$prefix}list-tile, .#{$prefix}list-nav {
4747
--#{$prefix}tile-action-color: #{$tile-leading-color};
@@ -61,7 +61,7 @@
6161
@if(not list.index($list-colors, $name)) {
6262
--#{$prefix}tile-active-indicator-border-color: #{$tile-indicator-border-color};
6363
} @else {
64-
--#{$prefix}tile-active-indicator-border-color: #{darken($mdb-default-color, 5%)};
64+
--#{$prefix}tile-active-indicator-border-color: #{color.adjust($mdb-default-color, $lightness: -5%)};
6565
}
6666

6767
--#{$prefix}tile-disable-action-color: #{$tile-disable-leading-color};

‎scss/utilities/_color_variants.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
// Create background colors classes
24
@each $color_name, $color in $mdb-colors-1 {
35
@each $color_type, $color_value in $color {
@@ -18,7 +20,7 @@
1820
}
1921
.bg-rgba-#{$color_name}-strong,
2022
.bg-rgba-#{$color_name}-strong:after {
21-
background-color: rgba(darken($color_value, 5%), .7) !important;
23+
background-color: rgba(color.adjust($color_value, $lightness: -5%), .7) !important;
2224
}
2325
} @else {
2426
@if $enable_full_palette {
@@ -46,7 +48,7 @@
4648

4749
a.text-grey-#{$color_name} {
4850
&:hover, &:focus {
49-
color: darken($color, 15%) !important;
51+
color: color.adjust($color, $lightness: -15%) !important;
5052
}
5153
}
5254
}
@@ -81,7 +83,7 @@ $removed-bs-colors: map-remove($removed-duplicate-colors,
8183

8284
a.text-#{$color_name} {
8385
&:hover, &:focus {
84-
color: darken($color, 15%) !important;
86+
color: color.adjust($color, $lightness: -15%) !important;
8587
}
8688
}
8789
}
@@ -113,12 +115,12 @@ $removed-bs-colors: map-remove($removed-duplicate-colors,
113115

114116
a.text-dark, a.text-elegant-color-dark {
115117
&:hover, &:focus {
116-
color: darken($elegant-color-dark, 15%) !important;
118+
color: color.adjust($elegant-color-dark, $lightness: -15%) !important;
117119
}
118120
}
119121

120122
a.text-dark-blue, a.text-primary-color-dark {
121123
&:hover, &:focus {
122-
color: darken($primary-color-dark, 15%) !important;
124+
color: color.adjust($primary-color-dark, $lightness: -15%) !important;
123125
}
124126
}

0 commit comments

Comments
 (0)