Skip to content

Commit 726e610

Browse files
ahmadfajarahmadfajar
committed
- BsListNavItem, BsListTile, BsTab, BsTabItem: add path-name and location properties to better accommodate the <RouterLink> property.
- Update CHANGELOG.md
1 parent f17b3b0 commit 726e610

File tree

15 files changed

+426
-270
lines changed

15 files changed

+426
-270
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@
33
> All notable changes to this project will be documented in this file.
44
55

6+
## v2.0.11
7+
8+
Released: August XX, 2024
9+
10+
### Features & Improvements
11+
12+
- **BsListNavItem**, **BsListTile**, **BsTab**, **BsTabItem**:
13+
- Add `path-name` and `location` properties to better accommodate the `<RouterLink>` property.
14+
15+
616
## v2.0.10
717

818
Released: August 12, 2024
919

1020
### Features & Improvements
1121

1222
- **BsProgressBar**:
13-
- Add properties `label`, `label-alignment`, `label-position` and `inner-cls`.
23+
- Add properties: `label`, `label-alignment`, `label-position` and `inner-cls`.
1424
- Replace property: `rounded` with `rounded-off`.
1525
- **BsTextField**, **BsNumericField**: add properties `prefix` and `suffix`.
1626
- **BsChip**: improve UI border-radius to comply material design spec.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-mdbootstrap",
3-
"version": "2.0.10",
3+
"version": "2.0.11",
44
"description": "Bootstrap5 Material Design Components for Vue.js",
55
"author": {
66
"name": "Ahmad Fajar",
@@ -30,8 +30,8 @@
3030
"component.d.ts",
3131
"package.json",
3232
"CHANGELOG.md",
33-
"README.md",
34-
"LICENSE.md"
33+
"LICENSE.md",
34+
"README.md"
3535
],
3636
"exports": {
3737
".": {

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

‎src/components/Field/field.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -160,18 +160,18 @@
160160
}
161161
}
162162

163-
.#{$prefix}field-prefix, .#{$prefix}field-suffix, {
163+
.#{$prefix}field-prefix, .#{$prefix}field-suffix {
164164
opacity: $text-field-opacity;
165165
font-weight: var(--#{$prefix}field-inline-text-font-weight);
166166
padding-top: var(--#{$prefix}field-padding-top);
167167
white-space: nowrap;
168168
}
169169

170-
.#{$prefix}field-prefix, {
170+
.#{$prefix}field-prefix {
171171
padding-left: var(--#{$prefix}field-padding-start);
172172
}
173173

174-
.#{$prefix}field-suffix, {
174+
.#{$prefix}field-suffix {
175175
padding-right: var(--#{$prefix}field-padding-end);
176176
}
177177

@@ -534,12 +534,12 @@
534534
&:not(.append-icon) {
535535
--#{$prefix}field-padding-end: 0;
536536

537-
.#{$prefix}field-suffix, {
537+
.#{$prefix}field-suffix {
538538
padding-left: $padding-sm + 0.125rem;
539539
}
540540
}
541541

542-
.#{$prefix}field-prefix, {
542+
.#{$prefix}field-prefix {
543543
padding-right: $padding-sm + 0.125rem;
544544
}
545545

‎src/components/ListView/BsListNavItem.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
shallowRef,
1212
watchEffect
1313
} from 'vue';
14-
import { useCurrentRoute, useHasRouter } from '../../mixins/CommonApi';
14+
import { useCurrentRoute, useHasRouter, useIsRouteMatch } from '../../mixins/CommonApi';
1515
import type { IListItem, IListViewProvider, TBsListNavItem, TListNavItemOptionProps, TRecord } from '../../types';
1616
import ListItem from './mixins/ListItem';
1717
import {
@@ -57,7 +57,7 @@ export default defineComponent<TBsListNavItem, TRecord, TRecord, ComputedOptions
5757
if (useHasRouter(cmpProps)) {
5858
const route = useCurrentRoute();
5959
watchEffect(() => {
60-
if (provider && (route?.value.path === cmpProps.path || route?.value.path.startsWith(cmpProps.path!))) {
60+
if (provider && route && useIsRouteMatch(route, cmpProps)) {
6161
provider.activeItem = refItem.value;
6262
let parent = refItem.value?.parent;
6363
while (parent) {
@@ -84,7 +84,7 @@ export default defineComponent<TBsListNavItem, TRecord, TRecord, ComputedOptions
8484
hasRouter.value = useHasRouter(cmpProps);
8585
if (hasRouter.value) {
8686
const route = useCurrentRoute();
87-
if (route && (route.value.path === cmpProps.path || route?.value.path.startsWith(cmpProps.path!))) {
87+
if (route && useIsRouteMatch(route, cmpProps)) {
8888
refItem.value?.setActive(true);
8989
}
9090
}

‎src/components/ListView/BsListTile.ts‎

Lines changed: 47 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,85 @@
11
import type { ComponentOptionsMixin, ComputedOptions, EmitsOptions, MethodOptions } from 'vue';
2-
import { computed, defineComponent, inject, nextTick, onBeforeUpdate, onMounted, ref, shallowRef, watch } from 'vue';
3-
import { useCurrentRoute, useHasLink, useHasRouter } from '../../mixins/CommonApi';
4-
import type { IListItem, IListViewProvider, TBsListTile, TListTileOptionProps, TRecord } from '../../types';
2+
import {
3+
computed,
4+
defineComponent,
5+
inject,
6+
nextTick,
7+
onBeforeUpdate,
8+
onMounted,
9+
ref,
10+
shallowRef,
11+
watch,
12+
} from 'vue';
13+
import { useCurrentRoute, useHasLink, useHasRouter, useIsRouteMatch } from '../../mixins/CommonApi';
14+
import type {
15+
IListItem,
16+
IListViewProvider,
17+
TBsListTile,
18+
TListTileOptionProps,
19+
TRecord,
20+
} from '../../types';
521
import { useListTileClassNames, useRenderListTile } from './mixins/listTileApi';
622
import { listTileProps } from './mixins/listViewProps';
723

8-
export default defineComponent<TBsListTile, TRecord, TRecord, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions>({
24+
export default defineComponent<
25+
TBsListTile,
26+
TRecord,
27+
TRecord,
28+
ComputedOptions,
29+
MethodOptions,
30+
ComponentOptionsMixin,
31+
ComponentOptionsMixin,
32+
EmitsOptions
33+
>({
934
name: 'BsListTile',
1035
props: listTileProps,
1136
emits: [
1237
'click',
1338
/**
1439
* Fired when this component's state is updated.
1540
*/
16-
'update:active'
41+
'update:active',
1742
],
18-
setup(props, {emit, expose, slots}) {
43+
setup(props, { emit, expose, slots }) {
1944
const thisProps = props as Readonly<TListTileOptionProps>;
2045
const vm = shallowRef<IListItem>();
2146
const isActive = ref<boolean | undefined>(thisProps.active);
2247
const hasRouter = ref<boolean>(useHasRouter(thisProps));
2348
const hasLink = ref<boolean>(useHasLink(thisProps));
2449

25-
expose({isActive});
50+
expose({ isActive });
2651

2752
const provider = inject<IListViewProvider>('ListView');
28-
const tagName = computed<string>(
29-
() => hasRouter.value || hasLink.value ? 'a' : 'div'
30-
);
31-
const tileClasses = computed<TRecord>(
32-
() => useListTileClassNames(tagName.value, thisProps, isActive, hasLink, provider)
53+
const tagName = computed<string>(() => (hasRouter.value || hasLink.value ? 'a' : 'div'));
54+
const tileClasses = computed<TRecord>(() =>
55+
useListTileClassNames(tagName.value, thisProps, isActive, hasLink, provider)
3356
);
3457

3558
watch(
3659
() => thisProps.active,
3760
(value) => {
3861
if (provider && provider.config.individualState === true) {
39-
isActive.value = value
62+
isActive.value = value;
4063
}
4164
}
4265
);
43-
onBeforeUpdate(
44-
() => {
45-
if (hasRouter.value) {
46-
const route = useCurrentRoute();
47-
if (route && route.value.path === thisProps.path) {
48-
isActive.value = true;
49-
nextTick().then(() => {
50-
emit('update:active', true);
51-
});
52-
}
66+
onBeforeUpdate(() => {
67+
if (hasRouter.value) {
68+
const route = useCurrentRoute();
69+
if (route && useIsRouteMatch(route, thisProps)) {
70+
isActive.value = true;
71+
nextTick().then(() => {
72+
emit('update:active', true);
73+
});
5374
}
5475
}
55-
);
76+
});
5677
onMounted(() => {
5778
hasRouter.value = useHasRouter(thisProps);
5879
hasLink.value = useHasLink(thisProps);
5980
});
6081

6182
return () =>
62-
useRenderListTile(tagName.value, slots, emit, thisProps, tileClasses, vm, provider)
63-
}
83+
useRenderListTile(tagName.value, slots, emit, thisProps, tileClasses, vm, provider);
84+
},
6485
});

‎src/components/ListView/mixins/ListItem.ts‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { isRef } from 'vue';
33
import type { IListItem, TEmitFn, TRecord } from '../../../types';
44
import Helper from '../../../utils/Helper';
55

6-
76
class ListItem implements IListItem {
87
public readonly uid: string;
98
public readonly tag: string;
@@ -12,11 +11,7 @@ class ListItem implements IListItem {
1211
private _children: Array<IListItem>;
1312
private _parent: IListItem | undefined;
1413

15-
constructor(
16-
uid: string, tag: string,
17-
component: ComponentInternalInstance,
18-
emitter: TEmitFn
19-
) {
14+
constructor(uid: string, tag: string, component: ComponentInternalInstance, emitter: TEmitFn) {
2015
this.uid = uid;
2116
this.tag = tag;
2217
this._component = component;
@@ -49,7 +44,7 @@ class ListItem implements IListItem {
4944
}
5045

5146
addChild(child: IListItem): number {
52-
const idx = this._children.findIndex(it => it.uid === child.uid);
47+
const idx = this._children.findIndex((it) => it.uid === child.uid);
5348
if (idx === -1) {
5449
return this._children.push(child);
5550
}
@@ -58,15 +53,15 @@ class ListItem implements IListItem {
5853
}
5954

6055
removeChild(id: string): void {
61-
const idx = this._children.findIndex(it => it.uid === id);
56+
const idx = this._children.findIndex((it) => it.uid === id);
6257
if (idx > -1) {
6358
this._children[idx].destroy();
6459
this._children.splice(idx, 1);
6560
}
6661
}
6762

6863
hasChild(): boolean {
69-
return this.children.length > 0
64+
return this.children.length > 0;
7065
}
7166

7267
fireEvent(name: string, ...args: unknown[]): void {
@@ -77,10 +72,10 @@ class ListItem implements IListItem {
7772
this.component.props.active = value;
7873

7974
if (!Helper.isEmpty(this.component.exposed)) {
80-
if (isRef((<TRecord>this.component.exposed).isActive)) {
81-
(<Ref<boolean>>(<TRecord>this.component.exposed).isActive).value = value;
75+
if (isRef((this.component.exposed as TRecord).isActive)) {
76+
((this.component.exposed as TRecord).isActive as Ref<boolean>).value = value;
8277
} else {
83-
(<TRecord>this.component.exposed).isActive = value;
78+
(this.component.exposed as TRecord).isActive = value;
8479
}
8580
}
8681

0 commit comments

Comments
 (0)