Skip to content

Commit 3d5aa61

Browse files
committed
docs: update examples, use import
1 parent 0fcb81e commit 3d5aa61

File tree

128 files changed

+1411
-1285
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+1411
-1285
lines changed

docs/.vitepress/components/affix/example.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<template>
22
<div id="affix-example" class="uiv">
3-
<affix :offset="50">
4-
<alert>I'm using affix.</alert>
5-
</affix>
3+
<Affix :offset="50">
4+
<Alert>I'm using affix.</Alert>
5+
</Affix>
66
</div>
77
</template>
8+
9+
<script setup>
10+
import { Affix, Alert } from 'uiv';
11+
</script>
12+
813
<style>
914
#affix-example .affix {
1015
z-index: 999;

docs/.vitepress/components/alert/auto-dismissing.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<template>
22
<section class="uiv">
3-
<alert
3+
<Alert
44
v-for="(item, index) in alerts"
55
:key="item.key"
66
:duration="duration"
77
@dismissed="alerts.splice(index, 1)"
88
>
99
This alert <b>will dismiss after {{ duration }}ms</b>.
10-
</alert>
10+
</Alert>
1111
<hr />
12-
<btn type="primary" @click="addAutoDismissAlert()"
13-
>Add Auto Dismiss Alert</btn
12+
<Btn type="primary" @click="addAutoDismissAlert()"
13+
>Add Auto Dismiss Alert</Btn
1414
>
1515
</section>
1616
</template>
17+
1718
<script setup>
1819
import { reactive } from 'vue';
20+
import { Alert, Btn } from 'uiv';
1921
2022
const alerts = reactive([]);
2123
const duration = 2000;

docs/.vitepress/components/alert/dismissible.vue

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<template>
22
<section class="uiv">
3-
<alert v-if="show" type="warning" dismissible @dismissed="show = false">
3+
<Alert v-if="show" type="warning" dismissible @dismissed="show = false">
44
<b>Warning!</b> Better check yourself, you're not looking too good.
5-
</alert>
6-
<alert
5+
</Alert>
6+
<Alert
77
v-for="(item, index) in alerts"
88
:key="item.key"
99
dismissible
1010
@dismissed="alerts.splice(index, 1)"
1111
>
1212
<b>Heads up!</b> This alert needs your attention, but it's not super
1313
important.
14-
</alert>
14+
</Alert>
1515
<hr />
16-
<btn type="primary" @click="addDismissibleAlert()"
17-
>Add Dismissible Alert</btn
16+
<Btn type="primary" @click="addDismissibleAlert()"
17+
>Add Dismissible Alert</Btn
1818
>
1919
</section>
2020
</template>
21+
2122
<script setup>
2223
import { reactive, ref } from 'vue';
24+
import { Alert, Btn } from 'uiv';
2325
2426
const show = ref(true);
2527
const alerts = reactive([]);
Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
<template>
22
<div class="uiv">
3-
<alert type="success"
3+
<Alert type="success"
44
><b>Well done!</b> You successfully read this important alert
5-
message.</alert
5+
message.</Alert
66
>
7-
<alert type="info"
7+
<Alert type="info"
88
><b>Heads up!</b> This alert needs your attention, but it's not super
9-
important.</alert
9+
important.</Alert
1010
>
11-
<alert type="warning"
11+
<Alert type="warning"
1212
><b>Warning!</b> Better check yourself, you're not looking too
13-
good.</alert
13+
good.</Alert
1414
>
15-
<alert type="danger"
16-
><b>Oh snap!</b> Change this and that and try again.</alert
15+
<Alert type="danger"
16+
><b>Oh snap!</b> Change this and that and try again.</Alert
1717
>
1818
</div>
1919
</template>
20+
21+
<script setup>
22+
import { Alert } from 'uiv';
23+
</script>
Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<template>
22
<section class="uiv">
3-
<btn type="primary" @click="show = !show">Toggle Collapsing Alert</btn>
3+
<Btn type="primary" @click="show = !show">Toggle Collapsing Alert</Btn>
44
<hr />
5-
<collapse v-model="show">
6-
<alert type="warning" dismissible @dismissed="show = false"
7-
>This alert <b>will collapse on open / close</b>.</alert
5+
<Collapse v-model="show">
6+
<Alert type="warning" dismissible @dismissed="show = false"
7+
>This alert <b>will collapse on open / close</b>.</Alert
88
>
9-
</collapse>
9+
</Collapse>
1010
</section>
1111
</template>
12+
1213
<script setup>
1314
import { ref } from 'vue';
15+
import { Alert, Btn, Collapse } from 'uiv';
1416
1517
const show = ref(true);
1618
</script>
Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<template>
22
<div class="uiv">
3-
<breadcrumbs>
4-
<breadcrumb-item href="#"><b>Home</b></breadcrumb-item>
5-
<breadcrumb-item href="#">Library</breadcrumb-item>
6-
<breadcrumb-item active>Data</breadcrumb-item>
7-
</breadcrumbs>
3+
<Breadcrumbs>
4+
<BreadcrumbItem href="#"><b>Home</b></BreadcrumbItem>
5+
<BreadcrumbItem href="#">Library</BreadcrumbItem>
6+
<BreadcrumbItem active>Data</BreadcrumbItem>
7+
</Breadcrumbs>
88
</div>
99
</template>
10+
11+
<script setup>
12+
import { Breadcrumbs, BreadcrumbItem } from 'uiv';
13+
</script>

docs/.vitepress/components/breadcrumbs/example.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<div class="uiv">
3-
<breadcrumbs :items="items" />
3+
<Breadcrumbs :items="items" />
44
</div>
55
</template>
66
<script setup>
77
import { ref } from 'vue';
8+
import { Breadcrumbs } from 'uiv';
89
910
const items = ref([
1011
{ text: 'Home', href: '#' },

docs/.vitepress/components/breadcrumbs/router-link.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<div class="uiv">
3-
<breadcrumbs :items="items" />
3+
<Breadcrumbs :items="items" />
44
</div>
55
</template>
66
<script setup>
77
import { ref } from 'vue';
8+
import { Breadcrumbs } from 'uiv';
89
910
const items = ref([
1011
{ text: 'Home', to: '/', exact: true },
Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<template>
22
<div class="uiv">
3-
<btn-group>
4-
<btn>Left</btn>
5-
<btn>Middle</btn>
6-
<btn>Right</btn>
7-
</btn-group>
3+
<BtnGroup>
4+
<Btn>Left</Btn>
5+
<Btn>Middle</Btn>
6+
<Btn>Right</Btn>
7+
</BtnGroup>
88
</div>
99
</template>
10+
11+
<script setup>
12+
import { Btn, BtnGroup } from 'uiv';
13+
</script>
Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
<template>
22
<div class="uiv">
3-
<btn-group justified>
4-
<btn href="javascript:;">Left</btn>
5-
<btn href="javascript:;">Middle</btn>
6-
<btn href="javascript:;">Right</btn>
7-
</btn-group>
3+
<BtnGroup justified>
4+
<Btn href="javascript:;">Left</Btn>
5+
<Btn href="javascript:;">Middle</Btn>
6+
<Btn href="javascript:;">Right</Btn>
7+
</BtnGroup>
88
<br />
9-
<btn-group justified>
10-
<btn justified>Left</btn>
11-
<btn justified>Middle</btn>
12-
<dropdown>
13-
<btn class="dropdown-toggle">Dropdown <span class="caret"></span></btn>
9+
<BtnGroup justified>
10+
<Btn justified>Left</Btn>
11+
<Btn justified>Middle</Btn>
12+
<Dropdown>
13+
<Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
1414
<template #dropdown>
1515
<li><a role="button">Action</a></li>
1616
<li><a role="button">Another action</a></li>
1717
<li><a role="button">Something else here</a></li>
1818
<li role="separator" class="divider"></li>
1919
<li><a role="button">Separated link</a></li>
2020
</template>
21-
</dropdown>
22-
</btn-group>
21+
</Dropdown>
22+
</BtnGroup>
2323
</div>
2424
</template>
25+
26+
<script setup>
27+
import { Btn, BtnGroup, Dropdown } from 'uiv';
28+
</script>

0 commit comments

Comments
 (0)