Skip to content

Commit 4c9ebc8

Browse files
ahmadfajarahmadfajar
committed
- Add demos: Breadcrumb and Image Uploader
- Update package.json and README.md
1 parent 9fdc4c3 commit 4c9ebc8

File tree

7 files changed

+133
-13
lines changed

7 files changed

+133
-13
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Vue MDBootstrap Example
1+
# Vue MDBootstrap Examples
22

3-
This repository contains examples on how to use the Vue MDBootstrap v2.x components.
3+
This repository contains examples on how to use the Vue MDBootstrap v2.1 components.
44

55
## Recommended IDE Setup
66

@@ -19,7 +19,7 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, _Vue - Offi
1919

2020
## Customize configuration
2121

22-
See [Vite Configuration Reference](https://vitejs.dev/config/).
22+
See [Vite Configuration Reference](https://vite.dev/config/).
2323

2424
## Project Setup
2525

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue3-mdb-example",
3-
"description": "Vue MDBootstrap v2.0 components demo",
4-
"version": "1.0.5",
3+
"description": "Vue MDBootstrap v2.1 components demo",
4+
"version": "1.1.0",
55
"private": true,
66
"author": {
77
"name": "Ahmad Fajar",
@@ -19,7 +19,7 @@
1919
},
2020
"dependencies": {
2121
"vue": "^3.5.13",
22-
"vue-mdbootstrap": "^2.0.15",
22+
"vue-mdbootstrap": "^2.1.0",
2323
"vue-router": "^4.5.0"
2424
},
2525
"devDependencies": {
@@ -29,9 +29,9 @@
2929
"@vue/tsconfig": "^0.7.0",
3030
"npm-run-all": "^4.1.5",
3131
"prettier": "^3.4.1",
32-
"sass": "^1.81.0",
32+
"sass": "^1.81.1",
3333
"typescript": "^5.7.2",
34-
"vite": "^6.0.1",
34+
"vite": "^6.0.2",
3535
"vue-tsc": "^2.1.10"
3636
},
3737
"browserslist": [

‎src/App.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,18 +135,22 @@ const routeNavB = menuNavs.filter((it) => it.group === 'Reference').sort(compare
135135
.card {
136136
&.mobi-card {
137137
--bs-card-border-radius: 0.375rem;
138-
--bs-card-inner-border-radius: calc(0.375rem - 1px);
139138
max-width: 400px;
140139
}
141140
142141
&.rounded-sm {
143142
--bs-card-border-radius: 0.375rem;
144-
--bs-card-inner-border-radius: calc(0.375rem - 1px);
145143
}
146144
147145
> .md-appbar:first-child {
148146
@include borders.top-radius(var(--bs-card-border-radius));
149147
}
150148
}
151149
}
150+
151+
.demo-block-content {
152+
.md-breadcrumb {
153+
--md-breadcrumb-container-padding-x: 0;
154+
}
155+
}
152156
</style>

‎src/components/DemoBlock.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,7 @@ $radius: 0.75rem;
140140
#aaa
141141
),
142142
repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
143-
background-position:
144-
0 0,
145-
4px 4px;
143+
background-position: 0 0, 4px 4px;
146144
background-size: 8px 8px;
147145
border: 0;
148146
padding: 0;

‎src/router/navigation.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,18 @@ export const menuNavs: TNavigationRecord[] = [
231231
path: '/components/lightbox',
232232
view: () => import('@/views/Components/DemoLightbox.vue')
233233
},
234+
{
235+
label: 'Breadcrumb',
236+
group: 'Components',
237+
path: '/components/breadcrumb',
238+
view: () => import('@/views/Components/DemoBreadcrumb.vue')
239+
},
240+
{
241+
label: 'Image Uploader',
242+
group: 'Components',
243+
path: '/components/image-uploader',
244+
view: () => import('@/views/Components/DemoImageUploader.vue')
245+
},
234246
{
235247
label: 'Color Variants',
236248
group: 'Reference',

‎src/views/Components/DemoBreadcrumb.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="docs-body container-lg mx-auto">
3+
<h2>Overview</h2>
4+
<DemoBlock class="mt-3">
5+
<BsBreadcrumb :items="items1" />
6+
<BsBreadcrumb :items="items2" />
7+
</DemoBlock>
8+
<h2 class="mt-5">Icons</h2>
9+
<DemoBlock class="mt-3">
10+
<BsBreadcrumb :items="items1" prepend-icon="home" />
11+
<BsBreadcrumb :items="items2" prepend-icon="home" icon-size="28"/>
12+
<div class="h5 mt-4">Using Custom Slot</div>
13+
<BsBreadcrumb :items="items2">
14+
<template #icon>
15+
<BsFontAwesome icon="house-user" variant="regular" />
16+
</template>
17+
</BsBreadcrumb>
18+
</DemoBlock>
19+
<h2 class="mt-5">Separators</h2>
20+
<DemoBlock class="mt-3">
21+
<BsBreadcrumb :items="items1" icon-size="22" prepend-icon="home" separator=">" />
22+
<div class="h5 mt-4">Using Embedded SVG</div>
23+
<BsBreadcrumb :items="items2" icon-size="22" prepend-icon="home" :separator="svg"/>
24+
</DemoBlock>
25+
</div>
26+
</template>
27+
28+
<script setup lang="ts">
29+
const svg = encodeURI('url("data:image/svg+xml, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 -60 320 512\' fill=\'#3b7cf5\' width=\'14\' height=\'16\'><path d=\'M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z\' /></svg>")');
30+
const items1 = [
31+
{ label: 'Home', href: '#' },
32+
{ label: 'Components', href: '#' },
33+
];
34+
const items2 = [
35+
{ label: 'Home', href: '#' },
36+
{ label: 'Components', path: '/components/breadcrumb' },
37+
{ label: 'Breadcrumb', href: '#' },
38+
];
39+
</script>

‎src/views/Components/DemoImageUploader.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="docs-body container-lg mx-auto">
3+
<h2>Overview</h2>
4+
<DemoBlock class="mt-3">
5+
<BsCard>
6+
<BsCardBody>
7+
<BsImageUploader
8+
ref="uploader"
9+
accept-types="image/jpeg, image/png"
10+
limit="0.2"
11+
@error="(error) => $notification.error(error.message)"
12+
/>
13+
<ul class="mt-3 mb-0">
14+
<li>Valid image types: *.jpg, *.jpeg, *.png</li>
15+
<li>Maximum image filesize: 200KB</li>
16+
</ul>
17+
</BsCardBody>
18+
<BsCardFooter>
19+
<BsButton
20+
:disabled="!btnEnabled"
21+
color="primary"
22+
@click="btnEnabled && doUpload($notification)"
23+
>
24+
Upload
25+
</BsButton>
26+
</BsCardFooter>
27+
<BsMaskLoader
28+
:show="isBusy"
29+
overlay-opacity="0.3"
30+
spinner-diameter="60"
31+
spinner-thickness="8"
32+
/>
33+
</BsCard>
34+
</DemoBlock>
35+
<BsNotification />
36+
</div>
37+
</template>
38+
39+
<script setup lang="ts">
40+
import { computed, ref, unref } from 'vue';
41+
import type { BsImageUploaderInstance, INotificationProvider } from 'vue-mdbootstrap';
42+
43+
const uploader = ref<BsImageUploaderInstance>();
44+
const isBusy = ref(false);
45+
const btnEnabled = computed(() => unref(uploader)?.fileBag.filename != null);
46+
47+
async function doUpload(notification: INotificationProvider) {
48+
try {
49+
isBusy.value = true;
50+
const response = await unref(uploader)?.upload('https://httpbin.io/post', 'file', {
51+
gallery: 'Photo Gallery',
52+
owner: 'John Doe',
53+
});
54+
55+
if (response?.status === 200) {
56+
notification.success('Upload success.');
57+
} else {
58+
notification.error('Upload failed.');
59+
}
60+
} catch (error) {
61+
// @ts-ignore
62+
notification.error(error.data?.message || error.message);
63+
} finally {
64+
isBusy.value = false;
65+
}
66+
}
67+
</script>

0 commit comments

Comments
 (0)