Skip to content

Commit 31aaaeb

Browse files
ahmadfajarahmadfajar
committed
- BsBreadcrumb:
 - Enable embedded SVG as separator, - Update scss - BsFontAwesome: fix bug default icon size - BsImageUploader: - Fix bug button change image - Fix emit declaration - Update typescript declaration - Update component registration - Bump to version 2.1.0
1 parent 926749c commit 31aaaeb

File tree

12 files changed

+112
-19
lines changed

12 files changed

+112
-19
lines changed

‎component.d.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import type {
55
BsAppbar,
66
BsAppbarItems,
77
BsAppbarTitle,
8-
BsAppContainer,
98
BsAvatar,
109
BsBadge,
10+
BsBreadcrumb,
1111
BsButton,
1212
BsCard,
1313
BsCardBody,
@@ -34,6 +34,7 @@ import type {
3434
BsIconSpinner,
3535
BsIconSvg,
3636
BsImageHolder,
37+
BsImageUploader,
3738
BsLightbox,
3839
BsListbox,
3940
BsListNav,
@@ -82,11 +83,12 @@ declare module '@vue/runtime-core' {
8283
export interface GlobalComponents {
8384
BsAlert: typeof BsAlert;
8485
BsApp: typeof BsApp;
85-
BsAppContainer: typeof BsAppContainer;
86+
BsAppContainer: typeof BsApp;
8687
BsAppbar: typeof BsAppbar;
8788
BsAppbarItems: typeof BsAppbarItems;
8889
BsAppbarTitle: typeof BsAppbarTitle;
8990
BsAvatar: typeof BsAvatar;
91+
BsBreadcrumb: typeof BsBreadcrumb;
9092
BsBadge: typeof BsBadge;
9193
BsButton: typeof BsButton;
9294
BsButtonToggle: typeof BsToggleButton;
@@ -117,6 +119,7 @@ declare module '@vue/runtime-core' {
117119
BsIconSvg: typeof BsIconSvg;
118120
BsIconToggle: typeof BsToggleIcon;
119121
BsImageHolder: typeof BsImageHolder;
122+
BsImageUploader: typeof BsImageUploader;
120123
BsLightbox: typeof BsLightbox;
121124
BsListNav: typeof BsListNav;
122125
BsListNavItem: typeof BsListNavItem;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-mdbootstrap",
3-
"version": "2.0.15",
3+
"version": "2.1.0",
44
"description": "Bootstrap5 Material Design Components for Vue.js",
55
"author": {
66
"name": "Ahmad Fajar",

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

‎src/components/Breadcrumb/BsBreadcrumb.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,19 @@ export default defineComponent<TBsBreadcrumb>({
4242

4343
function renderBreadcrumb(props: Readonly<TBreadcrumbOptionProps>, slots: Slots): VNode {
4444
const itemCount = props.items.length > 0 ? props.items.length - 1 : 0;
45+
let separator: string;
46+
47+
if (props.separator && props.separator.startsWith('url')) {
48+
separator = decodeURI(props.separator).replaceAll('#', '%23');
49+
} else {
50+
separator = `'${props.separator}'`;
51+
}
4552

4653
return h(
4754
props.tag || 'nav',
4855
{
49-
class: [`${cssPrefix}breadcrumbs`, props.sticky ? 'sticky-top' : ''],
50-
style: props.separator ? { '--bs-breadcrumb-divider': props.separator } : undefined,
56+
class: [`${cssPrefix}breadcrumb`, props.sticky ? 'sticky-top' : ''],
57+
style: props.separator ? { '--bs-breadcrumb-divider': separator } : undefined,
5158
ariaLabel: 'breadcrumb',
5259
},
5360
[

‎src/components/Breadcrumb/breadcrumb.scss‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
@use "../../../scss/color_vars" as colors;
12
@use "../../../scss/variables" as vars;
23

3-
.#{vars.$prefix}breadcrumbs {
4+
.#{vars.$prefix}breadcrumb {
45
--#{vars.$prefix}breadcrumb-container-padding-x: #{vars.$padding-lg};
56
--#{vars.$prefix}breadcrumb-container-padding-y: 0.75rem;
6-
--#{vars.$prefix}breadcrumb-icon-color: var(--#{vars.$prefix-bs}body-color);
7-
--#{vars.$prefix}breadcrumb-font-size: 0.875rem;
8-
--#{vars.$prefix}breadcrumb-label-color: var(--#{vars.$prefix-bs}body-color);
7+
--#{vars.$prefix}breadcrumb-divider-color: #{colors.$gray-600};
8+
--#{vars.$prefix}breadcrumb-icon-color: inherit;
9+
--#{vars.$prefix}breadcrumb-font-size: inherit;
10+
--#{vars.$prefix}breadcrumb-label-color: inherit;
11+
--#{vars.$prefix}breadcrumb-label-active-color: #{colors.$gray-700};
912
--#{vars.$prefix}breadcrumb-label-hover-color: var(--#{vars.$prefix-bs}link-color);
13+
--#{vars.$prefix}breadcrumb-line-height: 1.25;
1014

1115
display: flex;
1216
align-items: flex-end;
@@ -19,11 +23,14 @@
1923
}
2024

2125
> .breadcrumb {
22-
--#{vars.$prefix-bs}breadcrumb-margin-bottom: 0;
26+
--#{vars.$prefix-bs}breadcrumb-divider-color: var(--#{vars.$prefix}breadcrumb-divider-color);
27+
--#{vars.$prefix-bs}breadcrumb-item-active-color: var(--#{vars.$prefix}breadcrumb-label-active-color);
2328
--#{vars.$prefix-bs}breadcrumb-font-size: var(--#{vars.$prefix}breadcrumb-font-size);
29+
--#{vars.$prefix-bs}breadcrumb-margin-bottom: 0;
2430

25-
align-items: center;
31+
align-items: flex-end;
2632
flex-wrap: nowrap;
33+
line-height: var(--#{vars.$prefix}breadcrumb-line-height);
2734
overflow: hidden;
2835

2936
a {

‎src/components/Card/card.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.card {
66
--#{vars.$prefix-bs}card-border-radius: 0.75rem;
7-
--#{vars.$prefix-bs}card-inner-border-radius: calc(0.75rem - 1px);
7+
--#{vars.$prefix-bs}card-inner-border-radius: calc(var(--#{vars.$prefix-bs}card-border-radius) - 1px);
88

99
.card-header {
1010
font-weight: vars.$font-weight-semi-bold;

‎src/components/Icon/BsFontAwesome.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export default defineComponent<TBsFontAwesome>({
3333
},
3434
setup(props) {
3535
const thisProps = props as Readonly<TFontAwesomeOptionProps>;
36-
const szWidth = useSizeWidth(thisProps);
37-
const szHeight = useSizeHeight(thisProps);
36+
const szWidth = useSizeWidth(thisProps) || 24;
37+
const szHeight = useSizeHeight(thisProps) || 24;
3838
const svgIcon = ref<TIconData>();
3939
const svgClasses = computed<TRecord>(() => useSvgClasses(thisProps));
4040
const styles = computed<TRecord>(() => ({

‎src/components/Uploader/BsImageUploader.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,20 @@ export default defineComponent<TBsImageUploader>({
3939
},
4040
customText: objectProp as Prop<TCustomText>,
4141
},
42+
emits: [
43+
/**
44+
* Fired when the image on this component is changed.
45+
*/
46+
'change',
47+
/**
48+
* Fired when the image on this component is cleared or removed.
49+
*/
50+
'clear',
51+
/**
52+
* Fired when error is occurred.
53+
*/
54+
'error',
55+
],
4256
setup(props, { emit, expose }) {
4357
const thisProps = props as Readonly<TImageUploaderOptionProps>;
4458
const input = ref<HTMLInputElement>();

‎src/components/Uploader/mixins/uploaderApi.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,9 @@ function createUploaderButtons(
341341
onChangeImage(evt, inputRef);
342342
},
343343
},
344-
toDisplayString(props.customText?.changeImage || 'Change')
344+
{
345+
default: () => toDisplayString(props.customText?.changeImage || 'Change'),
346+
}
345347
),
346348
h(BsButton, {
347349
color: (props.buttonColor || 'primary') as Prop<string>,

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
ComponentCustomProps,
55
ComponentObjectPropsOptions,
66
ComponentPublicInstance,
7-
ComputedRef,
87
ObjectPlugin,
98
VNodeProps,
109
} from 'vue';
@@ -117,7 +116,7 @@ export declare interface BsImageUploaderInstance extends ComponentPublicInstance
117116
*/
118117
upload(url: string, property?: string, data?: TRecord): AxiosPromise;
119118

120-
fileBag: ComputedRef<{
119+
fileBag: {
121120
/**
122121
* The picture's file that exists within the component instance and ready to upload.
123122
*/
@@ -140,7 +139,7 @@ export declare interface BsImageUploaderInstance extends ComponentPublicInstance
140139
* @see [File](https://developer.mozilla.org/en-US/docs/Web/API/File) for more details.
141140
*/
142141
filetype?: string | null;
143-
}>;
142+
};
144143
}
145144

146145
export declare const BsUploaderPlugin: ObjectPlugin;

0 commit comments

Comments
 (0)