Skip to content

Commit c6a444b

Browse files
ahmadfajarahmadfajar
committed
- BsButton: improve UI to better comply material design spec.
- Helper: improve `uuid` generation performance. - BsModal, BsLightbox: fixed bug closing programmatically didn't revert document scrolling to original. - Update Typescript declaration - Update CHANGELOG.md and package.json
1 parent d2191ad commit c6a444b

File tree

11 files changed

+82
-54
lines changed

11 files changed

+82
-54
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@
77

88
Released: September XX, 2024
99

10+
### Features & Improvements
11+
12+
- **BsButton**: improve UI to better comply material design spec.
13+
- **Helper**: improve `uuid` generation performance.
14+
1015
### Bug Fixes
1116

12-
- **BsListTile**: fixed bug when is being in ripple animation state the **BsListTileSubtitle**
13-
text overlap with **BsListTileAction** if **BsListTileContent** multiline is on.
17+
- **BsListTile**: fixed bug **BsListTileSubtitle** text overlapped with **BsListTileAction**
18+
if multiline property of **BsListTileContent** was active and in ripple animation state.
19+
- **BsModal**, **BsLightbox**: fixed bug closing programmatically didn't revert
20+
document scrolling to original.
1421

1522

1623
## v2.0.12

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-mdbootstrap",
3-
"version": "2.0.12",
3+
"version": "2.0.13",
44
"description": "Bootstrap5 Material Design Components for Vue.js",
55
"author": {
66
"name": "Ahmad Fajar",
@@ -68,27 +68,27 @@
6868
"lodash": "^4.17.21",
6969
"luxon": "^3.5.0",
7070
"resize-observer-polyfill": "^1.5.1",
71-
"vue": "^3.5.6"
71+
"vue": "^3.5.8"
7272
},
7373
"devDependencies": {
74-
"@rollup/plugin-node-resolve": "^15.2.3",
74+
"@rollup/plugin-node-resolve": "^15.3.0",
7575
"@rollup/plugin-terser": "^0.4.4",
7676
"@tsconfig/node20": "^20.1.4",
7777
"@types/body-scroll-lock": "^3.1.2",
78-
"@types/lodash": "^4.17.7",
78+
"@types/lodash": "^4.17.9",
7979
"@types/luxon": "^3.4.2",
80-
"@types/node": "^22.5.5",
80+
"@types/node": "^22.7.0",
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.79.1",
88+
"sass": "^1.79.3",
8989
"terser": "^5.33.0",
9090
"typescript": "^5.6.2",
91-
"vite": "^5.4.6",
91+
"vite": "^5.4.8",
9292
"vue-router": "^4.4.5"
9393
},
9494
"browserslist": [

‎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.12
2+
* Vue MDBootstrap v2.0.13
33
* Released under the BSD-3 License.
44
* Copyright Ahmad Fajar (https://ahmadfajar.github.io).
55
*/

‎scss/_functions.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,6 @@
4949
@return math.div(($red + $green + $blue), 1000);
5050
}
5151

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

‎src/components/Animation/types/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export declare const BsExpandTransition: {
6666
};
6767

6868
declare type AllowedOverlayProps = AllowedComponentProps & ComponentCustomProps & VNodeProps & {
69-
onClick: (e: Event) => void;
70-
'@click': (e: Event) => void;
69+
onClick?: (e: Event) => void;
70+
'@click'?: (e: Event) => void;
7171
}
7272

7373
export declare const BsOverlay: {

‎src/components/Button/button.scss‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@
77

88
.btn {
99
$disabled-bg: color.adjust($gray-500, $lightness: 20%);
10-
$border-color: color.adjust($gray-500, $lightness: 8%);
10+
$disabled-border-color: color.adjust($gray-500, $lightness: 20%);
11+
1112
--#{$bs-prefix}btn-padding-y: 0;
1213
--#{$bs-prefix}btn-padding-x: 0;
1314
--#{$bs-prefix}btn-border-radius: #{$btn-border-radius};
1415
--#{$bs-prefix}btn-disabled-bg: #{$disabled-bg};
15-
--#{$bs-prefix}btn-disabled-border-color: #{$border-color};
16+
--#{$bs-prefix}btn-disabled-border-color: #{$disabled-border-color};
1617
--#{$bs-prefix}btn-disabled-color: #{$gray-700};
1718
//--#{$bs-prefix}btn-disabled-opacity: .65;
1819
--#{$bs-prefix}btn-readonly-opacity: 0.75;
@@ -82,6 +83,7 @@
8283
&[class*='btn-outline'] {
8384
--#{$bs-prefix}btn-disabled-bg: transparent;
8485
--#{$bs-prefix}btn-disabled-color: #{$gray-500};
86+
--#{$bs-prefix}btn-disabled-border-color: #{color.adjust($gray-500, $lightness: 8%)};
8587
}
8688

8789
&.#{$prefix}btn-raised {
@@ -193,8 +195,11 @@
193195
}
194196

195197
&[class*='btn-flat'] {
196-
--#{$bs-prefix}btn-disabled-bg: transparent;
197-
--#{$bs-prefix}btn-disabled-color: #{$gray-500};
198+
$disabled-color: color.adjust($gray-500, $lightness: 25%);
199+
200+
--#{$bs-prefix}btn-disabled-bg: #{$disabled-color};
201+
--#{$bs-prefix}btn-disabled-border-color: #{$disabled-color};
202+
--#{$bs-prefix}btn-disabled-color: #{$gray-600};
198203
--#{$bs-prefix}btn-inner-padding-x: 0.75rem;
199204
--#{$bs-prefix}btn-lg-inner-padding-x: 0.875rem;
200205
--#{$bs-prefix}btn-sm-inner-padding-x: 0.625rem;
@@ -230,8 +235,8 @@
230235
--#{$bs-prefix}btn-inner-padding-y: #{$padding-base};
231236
--#{$bs-prefix}btn-lg-inner-padding-x: #{$padding-lg};
232237
--#{$bs-prefix}btn-lg-inner-padding-y: #{$padding-lg};
233-
--#{$bs-prefix}btn-sm-inner-padding-x: 0.625rem;
234-
--#{$bs-prefix}btn-sm-inner-padding-y: 0.625rem;
238+
--#{$bs-prefix}btn-sm-inner-padding-x: #{$padding-sm};
239+
--#{$bs-prefix}btn-sm-inner-padding-y: #{$padding-sm};
235240
--#{$bs-prefix}btn-xs-inner-padding-x: 0.375rem;
236241
--#{$bs-prefix}btn-xs-inner-padding-y: 0.375rem;
237242
--#{$bs-prefix}btn-border-radius: var(--#{$bs-prefix}btn-inner-padding-x);
@@ -290,11 +295,12 @@
290295

291296
.#{$prefix}btn-icon {
292297
$disabled-bg: color.adjust($gray-500, $lightness: 20%);
293-
$border-color: color.adjust($gray-500, $lightness: 8%);
298+
$disabled-border-color: color.adjust($gray-500, $lightness: 20%);
299+
294300
--#{$bs-prefix}btn-border-width: 1px;
295301
--#{$bs-prefix}btn-border-radius: #{$border-radius-circle};
296302
--#{$bs-prefix}btn-disabled-bg: #{$disabled-bg};
297-
--#{$bs-prefix}btn-disabled-border-color: #{$border-color};
303+
--#{$bs-prefix}btn-disabled-border-color: #{$disabled-border-color};
298304
--#{$bs-prefix}btn-disabled-color: #{$gray-700};
299305
--#{$bs-prefix}btn-disabled-opacity: 0.65;
300306
--#{$bs-prefix}btn-readonly-opacity: 0.75;
@@ -310,14 +316,14 @@
310316
--#{$bs-prefix}btn-sm-line-height: 2rem; // 32px
311317
--#{$bs-prefix}btn-xs-line-height: 1.5rem; // 24px
312318

313-
--#{$bs-prefix}btn-height: 2.75rem; // 44px
314-
--#{$bs-prefix}btn-width: 2.75rem; // 44px
315-
--#{$bs-prefix}btn-lg-height: 3.5rem; // 56px
316-
--#{$bs-prefix}btn-lg-width: 3.5rem; // 56px
317-
--#{$bs-prefix}btn-sm-height: 2rem; // 32px
318-
--#{$bs-prefix}btn-sm-width: 2rem; // 32px
319-
--#{$bs-prefix}btn-xs-height: 1.5rem; // 24px
320-
--#{$bs-prefix}btn-xs-width: 1.5rem; // 24px
319+
--#{$bs-prefix}btn-height: 2.375rem; // 38px
320+
--#{$bs-prefix}btn-width: 2.375rem; // 38px
321+
--#{$bs-prefix}btn-lg-height: 3.5rem; // 56px
322+
--#{$bs-prefix}btn-lg-width: 3.5rem; // 56px
323+
--#{$bs-prefix}btn-sm-height: 2rem; // 32px
324+
--#{$bs-prefix}btn-sm-width: 2rem; // 32px
325+
--#{$bs-prefix}btn-xs-height: 1.5rem; // 24px
326+
--#{$bs-prefix}btn-xs-width: 1.5rem; // 24px
321327

322328
--#{$bs-prefix}btn-state-box-shadow: var(--#{$bs-prefix}btn-initial-box-shadow);
323329
--#{$bs-prefix}btn-state-bg: var(--#{$bs-prefix}btn-bg);
@@ -328,19 +334,14 @@
328334
--#{$bs-prefix}btn-inner-state-width: var(--#{$bs-prefix}btn-width);
329335

330336
@include transition($btn-transition);
331-
@include flexbox(
332-
(
333-
display: inline-flex,
334-
flex: 0 0 auto,
335-
)
336-
);
337337
@include border-radius(var(--#{$bs-prefix}btn-border-radius));
338338
@include box-shadow(var(--#{$bs-prefix}btn-state-box-shadow));
339339

340340
background-color: var(--#{$bs-prefix}btn-state-bg);
341341
border: var(--#{$bs-prefix}btn-border-width) solid var(--#{$bs-prefix}btn-state-border-color);
342342
color: var(--#{$bs-prefix}btn-state-color);
343343
cursor: pointer;
344+
display: inline-block;
344345
padding: 0;
345346
vertical-align: middle;
346347
line-height: var(--#{$bs-prefix}btn-state-line-height);
@@ -392,6 +393,19 @@
392393
opacity: var(--#{$bs-prefix}btn-disabled-opacity);
393394
pointer-events: none;
394395
cursor: default;
396+
397+
&[class*='btn-outline'] {
398+
--#{$bs-prefix}btn-state-bg: transparent;
399+
--#{$bs-prefix}btn-state-border-color: #{color.adjust($gray-500, $lightness: 8%)};
400+
--#{$bs-prefix}btn-state-color: #{$gray-500};
401+
}
402+
403+
&[class*='btn-flat'] {
404+
$disabled-color: color.adjust($gray-500, $lightness: 25%);
405+
--#{$bs-prefix}btn-state-bg: #{$disabled-color};
406+
--#{$bs-prefix}btn-state-border-color: #{$disabled-color};
407+
--#{$bs-prefix}btn-state-color: #{$gray-600};
408+
}
395409
}
396410

397411
> .#{$prefix}ripple {

‎src/components/ListView/types/index.d.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
AllowedComponentProps,
33
ComponentCustomProps,
44
ComponentInternalInstance,
5-
ComponentObjectPropsOptions,
5+
ComponentObjectPropsOptions, ComponentPublicInstance,
66
Plugin,
77
Ref,
88
RendererNode,
@@ -261,6 +261,12 @@ export declare const BsListNav: {
261261
};
262262
};
263263

264+
export declare interface BsListNavInstance extends ComponentPublicInstance {
265+
collapsing: Ref<boolean>;
266+
expanded: Ref<boolean>;
267+
isActive: Ref<boolean>;
268+
}
269+
264270
declare type AllowedListItemProps = AllowedComponentProps &
265271
ComponentCustomProps &
266272
VNodeProps & {
@@ -286,6 +292,11 @@ export declare const BsListNavItem: {
286292
};
287293
};
288294

295+
export declare interface BsListNavItemInstance extends ComponentPublicInstance {
296+
expanded: Ref<boolean>;
297+
isActive: Ref<boolean>;
298+
}
299+
289300
export declare const BsListTile: {
290301
new (): {
291302
$props: AllowedListItemProps & TListTileOptionProps;
@@ -300,6 +311,10 @@ export declare const BsListTile: {
300311
};
301312
};
302313

314+
export declare interface BsListTileInstance extends ComponentPublicInstance {
315+
isActive: Ref<boolean>;
316+
}
317+
303318
export declare const BsListTileAction: {
304319
new (): {
305320
$props: AllowedComponentProps &

‎src/components/Modal/BsLightbox.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ export default defineComponent<TBsLightbox>({
8181
watch(
8282
() => thisProps.open as boolean,
8383
(value) => {
84-
isOpen.value = value;
8584
if (value) {
85+
isOpen.value = value;
8686
zoom.value = 1;
8787
rotate.value = 0;
8888
itemIndex.value = itemIndex.value > -1 ? itemIndex.value : 0;
@@ -91,6 +91,8 @@ export default defineComponent<TBsLightbox>({
9191
? thisProps.items[itemIndex.value]
9292
: undefined;
9393
instance.value && PopupManager.add(instance.value, thisProps, isOpen);
94+
} else {
95+
instance.value && PopupManager.closePopover(instance.value, isOpen, 'State changed.');
9496
}
9597
}
9698
);

‎src/components/Modal/BsModal.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,16 @@ export default defineComponent<TBsModal>({
4444
}));
4545

4646
watch(
47-
() => <boolean>thisProps.open,
47+
() => thisProps.open as boolean,
4848
(value) => {
49-
modalOpen.value = value;
5049
if (value) {
50+
modalOpen.value = value;
5151
instance.value && PopupManager.add(instance.value, thisProps, modalOpen);
5252
nextTick().then(() =>
5353
useSetDialogMaxHeight(thisProps, dialogEl, headerEl, bodyEl, footerEl)
5454
);
55+
} else {
56+
instance.value && PopupManager.closePopover(instance.value, modalOpen, 'State changed.');
5557
}
5658
}
5759
);

‎src/utils/Helper.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -300,17 +300,8 @@ export default class Helper {
300300
*/
301301
static uuid(standard = false): string {
302302
if (standard) {
303-
if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
304-
// @ts-ignore
305-
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
306-
/[018]/g,
307-
// @ts-ignore
308-
(c) =>
309-
(
310-
c ^
311-
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
312-
).toString(16)
313-
);
303+
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
304+
return crypto.randomUUID();
314305
} else {
315306
let value = Date.now();
316307
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {

0 commit comments

Comments
 (0)