Skip to content

Commit 4d10b86

Browse files
jd-solankijd-solanki
authored
feat(loader): loader component improvements (#130)
1 parent 908f038 commit 4d10b86

File tree

19 files changed

+173
-469
lines changed

19 files changed

+173
-469
lines changed

‎docs/components/Playground.vue

Lines changed: 13 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,21 @@
11
<script lang="ts" setup>
2-
import { onMounted, ref } from 'vue'
2+
import { ref } from 'vue'
33
4-
const loading = ref(true)
5-
6-
onMounted(() => {
7-
setTimeout(() => {
8-
loading.value = false
9-
}, 5000)
10-
})
4+
const val = ref('')
5+
const loading = ref(false)
116
</script>
127

138
<template>
14-
<div class="flex flex-wrap gap-6">
15-
<!-- Alert -->
16-
<AAlert
17-
color="info"
18-
class="relative"
19-
>
20-
Fruitcake I love liquorice apple pie croissant.
21-
<ALoader
22-
:loading="loading"
23-
class="text-2xl"
24-
/>
25-
</AAlert>
26-
<AAlert
27-
color="info"
28-
variant="fill"
29-
class="relative"
30-
>
31-
Fruitcake I love liquorice apple pie croissant.
32-
<ALoader
33-
:loading="loading"
34-
35-
class="text-2xl"
36-
/>
37-
</AAlert>
38-
<AAlert
39-
color="info"
40-
variant="outline"
41-
class="relative"
42-
>
43-
Fruitcake I love liquorice apple pie croissant.
44-
<ALoader
45-
:loading="loading"
46-
47-
class="text-2xl bg-white dark:bg-dark"
48-
/>
49-
</AAlert>
50-
<AAlert
51-
color="info"
52-
variant="text"
53-
class="relative"
54-
>
55-
Fruitcake I love liquorice apple pie croissant.
56-
<ALoader
57-
:loading="loading"
58-
59-
class="text-2xl bg-light dark:bg-dark"
60-
/>
61-
</AAlert>
62-
63-
<!-- Card -->
64-
<ACard
65-
variant="fill"
66-
color="danger"
67-
title="Card title"
68-
subtitle="Chocolate cake tiramisu donut"
69-
>
70-
<div class="a-card-body a-card-spacer">
71-
<p class="text-sm">
72-
<ALoader
73-
:loading="loading"
74-
75-
class="text-3xl"
76-
title="It's loading..."
77-
subtitle="Click to stop loading."
78-
/>
79-
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
80-
bar.
81-
</p>
82-
</div>
83-
</ACard>
84-
85-
<ACard
86-
variant="light"
87-
color="danger"
88-
>
89-
<ALoader
9+
<AInput
10+
v-model="val"
11+
class="w-300px m-4"
12+
@input="loading = !loading"
13+
>
14+
<template #prepend-inner>
15+
<ALoadingIcon
16+
icon="i-bx-search"
9017
:loading="loading"
91-
92-
class="text-3xl"
93-
title="It's loading..."
94-
subtitle="Click to stop loading."
9518
/>
96-
<div class="a-card-body a-card-spacer">
97-
<ATypography
98-
title="Card title"
99-
subtitle="Chocolate cake tiramisu donut"
100-
/>
101-
<p class="text-sm">
102-
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
103-
bar.
104-
</p>
105-
</div>
106-
</ACard>
107-
108-
<div class="flex gap-x-2">
109-
<AChip
110-
variant="fill"
111-
class="relative"
112-
>
113-
Primary
114-
<ALoader
115-
:loading="loading"
116-
/>
117-
</AChip>
118-
<AChip class="relative">
119-
Primary
120-
<ALoader
121-
:loading="loading"
122-
/>
123-
</AChip>
124-
<AChip
125-
variant="outline"
126-
class="relative"
127-
>
128-
Primary
129-
<ALoader
130-
:loading="loading"
131-
132-
class="bg-white dark:bg-dark"
133-
/>
134-
</AChip>
135-
<AChip
136-
variant="text"
137-
class="relative"
138-
>
139-
Primary
140-
<ALoader
141-
:loading="loading"
142-
class="bg-light dark:bg-dark"
143-
/>
144-
</AChip>
145-
</div>
146-
147-
<div class="w-full flex gap-6">
148-
<ABtn
149-
:loading="loading"
150-
variant="fill"
151-
>
152-
Button
153-
</ABtn>
154-
</div>
155-
</div>
19+
</template>
20+
</AInput>
15621
</template>

‎docs/components/demos/loader/DemoLoaderComponents.vue

Lines changed: 9 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,36 @@
11
<script lang="ts" setup>
2-
import { useTimeout } from '@vueuse/core'
32
import { ref } from 'vue'
43
5-
const { ready, start, stop } = useTimeout(1000, { controls: true })
6-
7-
const isDialogShown = ref(false)
8-
const isDrawerShown = ref(false)
4+
const btnLoading = ref(false)
5+
const iconBtnLoading = ref(false)
6+
const cardLoading = ref(false)
97
</script>
108

119
<template>
1210
<div class="flex flex-wrap gap-6">
1311
<ABtn
14-
:loading="!ready"
15-
@click="ready && start()"
12+
:loading="btnLoading"
13+
@click="btnLoading = !btnLoading"
1614
>
1715
Button
1816
</ABtn>
1917

2018
<ABtn
21-
:loading="!ready"
19+
:loading="iconBtnLoading"
2220
icon-only
2321
icon="i-bx-cloud-upload"
24-
@click="ready && start()"
22+
@click="iconBtnLoading = !iconBtnLoading"
2523
/>
2624

27-
<!-- Alert -->
28-
<AAlert
29-
variant="fill"
30-
class="relative"
31-
@click="ready && start()"
32-
>
33-
Fruitcake I love liquorice apple pie croissant.
34-
<ALoader
35-
:loading="!ready"
36-
/>
37-
</AAlert>
38-
3925
<!-- Card -->
4026
<div class="cards-demo-container">
4127
<ACard
4228
title="Card title"
4329
subtitle="Chocolate cake tiramisu donut"
4430
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
45-
:loading="!ready"
46-
@click="ready && start()"
31+
:loading="cardLoading"
32+
@click="cardLoading = !cardLoading"
4733
/>
4834
</div>
49-
50-
<!-- Dialog -->
51-
<ADialog
52-
v-model="isDialogShown"
53-
title="Dialog title"
54-
subtitle="Chocolate cake tiramisu donut"
55-
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
56-
>
57-
<ALoader
58-
:loading="!ready"
59-
overlay
60-
class="text-6xl bg-white"
61-
/>
62-
</ADialog>
63-
64-
<ABtn @click="isDialogShown = true; start()">
65-
Show dialog
66-
</ABtn>
67-
68-
<!-- Drawer -->
69-
<ADrawer
70-
v-model="isDrawerShown"
71-
title="Drawer title"
72-
subtitle="Chocolate cake tiramisu donut"
73-
>
74-
<ALoader
75-
:loading="!ready"
76-
overlay
77-
class="text-6xl bg-white"
78-
/>
79-
</ADrawer>
80-
81-
<ABtn @click="isDrawerShown = true; start()">
82-
Show drawer
83-
</ABtn>
8435
</div>
8536
</template>

‎docs/components/demos/loader/DemoLoaderFullPage.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const loading = ref(false)
1414
full-page
1515
title="Full page loading"
1616
subtitle="Click anywhere to stop loading"
17-
class="text-4xl"
1817
@click="loading = false"
1918
/>
2019
</template>

‎docs/components/demos/loader/DemoLoaderLoader.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script lang="ts" setup>
2+
import { useTimeout } from '@vueuse/core'
3+
import { ref } from 'vue'
4+
5+
const { ready, start } = useTimeout(1000, { controls: true })
6+
7+
const alertLoading = ref(false)
8+
9+
const isDialogShown = ref(false)
10+
const isDrawerShown = ref(false)
11+
</script>
12+
13+
<template>
14+
<div class="flex flex-wrap gap-6">
15+
<!-- Alert -->
16+
<AAlert
17+
variant="fill"
18+
class="relative"
19+
icon="i-bx-info-circle"
20+
@click="alertLoading = !alertLoading"
21+
>
22+
Click me to toggle loading
23+
<ALoader :loading="alertLoading" />
24+
</AAlert>
25+
<!-- Dialog -->
26+
<ADialog
27+
v-model="isDialogShown"
28+
title="Dialog title"
29+
subtitle="Chocolate cake tiramisu donut"
30+
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
31+
:loading="!ready"
32+
class="[--a-loader-overlay-bg-opacity:1]"
33+
/>
34+
<ABtn @click="isDialogShown = true; start()">
35+
Show dialog
36+
</ABtn>
37+
<!-- Drawer -->
38+
<ADrawer
39+
v-model="isDrawerShown"
40+
title="Drawer title"
41+
subtitle="Chocolate cake tiramisu donut"
42+
:loading="!ready"
43+
class="[--a-loader-overlay-bg-opacity:1]"
44+
/>
45+
<ABtn @click="isDrawerShown = true; start()">
46+
Show drawer
47+
</ABtn>
48+
</div>
49+
</template>

0 commit comments

Comments
 (0)