+1411
-1285
lines changed Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
1 1
<template>
2 2
<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>
6 6
</div>
7 7
</template>
8 + 9 +
<script setup>
10 +
import { Affix, Alert } from 'uiv';
11 +
</script>
12 + 8 13
<style>
9 14
#affix-example .affix {
10 15
z-index: 999;
@@ -1,21 +1,23 @@
1 1
<template>
2 2
<section class="uiv">
3 -
<alert
3 +
<Alert
4 4
v-for="(item, index) in alerts"
5 5
:key="item.key"
6 6
:duration="duration"
7 7
@dismissed="alerts.splice(index, 1)"
8 8
>
9 9
This alert <b>will dismiss after {{ duration }}ms</b>.
10 -
</alert>
10 +
</Alert>
11 11
<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
14 14
>
15 15
</section>
16 16
</template>
17 + 17 18
<script setup>
18 19
import { reactive } from 'vue';
20 +
import { Alert, Btn } from 'uiv';
19 21 20 22
const alerts = reactive([]);
21 23
const duration = 2000;
@@ -1,25 +1,27 @@
1 1
<template>
2 2
<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">
4 4
<b>Warning!</b> Better check yourself, you're not looking too good.
5 -
</alert>
6 -
<alert
5 +
</Alert>
6 +
<Alert
7 7
v-for="(item, index) in alerts"
8 8
:key="item.key"
9 9
dismissible
10 10
@dismissed="alerts.splice(index, 1)"
11 11
>
12 12
<b>Heads up!</b> This alert needs your attention, but it's not super
13 13
important.
14 -
</alert>
14 +
</Alert>
15 15
<hr />
16 -
<btn type="primary" @click="addDismissibleAlert()"
17 -
>Add Dismissible Alert</btn
16 +
<Btn type="primary" @click="addDismissibleAlert()"
17 +
>Add Dismissible Alert</Btn
18 18
>
19 19
</section>
20 20
</template>
21 + 21 22
<script setup>
22 23
import { reactive, ref } from 'vue';
24 +
import { Alert, Btn } from 'uiv';
23 25 24 26
const show = ref(true);
25 27
const alerts = reactive([]);
@@ -1,19 +1,23 @@
1 1
<template>
2 2
<div class="uiv">
3 -
<alert type="success"
3 +
<Alert type="success"
4 4
><b>Well done!</b> You successfully read this important alert
5 -
message.</alert
5 +
message.</Alert
6 6
>
7 -
<alert type="info"
7 +
<Alert type="info"
8 8
><b>Heads up!</b> This alert needs your attention, but it's not super
9 -
important.</alert
9 +
important.</Alert
10 10
>
11 -
<alert type="warning"
11 +
<Alert type="warning"
12 12
><b>Warning!</b> Better check yourself, you're not looking too
13 -
good.</alert
13 +
good.</Alert
14 14
>
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
17 17
>
18 18
</div>
19 19
</template>
20 + 21 +
<script setup>
22 +
import { Alert } from 'uiv';
23 +
</script>
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
1 1
<template>
2 2
<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>
4 4
<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
8 8
>
9 -
</collapse>
9 +
</Collapse>
10 10
</section>
11 11
</template>
12 + 12 13
<script setup>
13 14
import { ref } from 'vue';
15 +
import { Alert, Btn, Collapse } from 'uiv';
14 16 15 17
const show = ref(true);
16 18
</script>
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
1 1
<template>
2 2
<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>
8 8
</div>
9 9
</template>
10 + 11 +
<script setup>
12 +
import { Breadcrumbs, BreadcrumbItem } from 'uiv';
13 +
</script>
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
1 1
<template>
2 2
<div class="uiv">
3 -
<breadcrumbs :items="items" />
3 +
<Breadcrumbs :items="items" />
4 4
</div>
5 5
</template>
6 6
<script setup>
7 7
import { ref } from 'vue';
8 +
import { Breadcrumbs } from 'uiv';
8 9 9 10
const items = ref([
10 11
{ text: 'Home', href: '#' },
@@ -1,10 +1,11 @@
1 1
<template>
2 2
<div class="uiv">
3 -
<breadcrumbs :items="items" />
3 +
<Breadcrumbs :items="items" />
4 4
</div>
5 5
</template>
6 6
<script setup>
7 7
import { ref } from 'vue';
8 +
import { Breadcrumbs } from 'uiv';
8 9 9 10
const items = ref([
10 11
{ text: 'Home', to: '/', exact: true },
@@ -1,9 +1,13 @@
1 1
<template>
2 2
<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>
8 8
</div>
9 9
</template>
10 + 11 +
<script setup>
12 +
import { Btn, BtnGroup } from 'uiv';
13 +
</script>
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
1 1
<template>
2 2
<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>
8 8
<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>
14 14
<template #dropdown>
15 15
<li><a role="button">Action</a></li>
16 16
<li><a role="button">Another action</a></li>
17 17
<li><a role="button">Something else here</a></li>
18 18
<li role="separator" class="divider"></li>
19 19
<li><a role="button">Separated link</a></li>
20 20
</template>
21 -
</dropdown>
22 -
</btn-group>
21 +
</Dropdown>
22 +
</BtnGroup>
23 23
</div>
24 24
</template>
25 + 26 +
<script setup>
27 +
import { Btn, BtnGroup, Dropdown } from 'uiv';
28 +
</script>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4