Skip to content

Commit 908f038

Browse files
jd-solankijd-solanki
committed
feat(loader): simplified loading in components
1 parent 024f90e commit 908f038

33 files changed

+6926
-10363
lines changed

‎docs/components/Playground.vue

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

413
<template>
5-
<ABtn>Button</ABtn>
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
90+
:loading="loading"
91+
92+
class="text-3xl"
93+
title="It's loading..."
94+
subtitle="Click to stop loading."
95+
/>
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>
6156
</template>

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

Lines changed: 0 additions & 6 deletions
This file was deleted.

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

Lines changed: 24 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,42 @@ const isDrawerShown = ref(false)
1010

1111
<template>
1212
<div class="flex flex-wrap gap-6">
13+
<ABtn
14+
:loading="!ready"
15+
@click="ready && start()"
16+
>
17+
Button
18+
</ABtn>
19+
20+
<ABtn
21+
:loading="!ready"
22+
icon-only
23+
icon="i-bx-cloud-upload"
24+
@click="ready && start()"
25+
/>
26+
1327
<!-- Alert -->
1428
<AAlert
15-
color="info"
1629
variant="fill"
1730
class="relative"
1831
@click="ready && start()"
1932
>
20-
AAlert component. Click to start loading...
33+
Fruitcake I love liquorice apple pie croissant.
2134
<ALoader
2235
:loading="!ready"
23-
overlay
24-
class="text-2xl"
2536
/>
2637
</AAlert>
2738

2839
<!-- Card -->
29-
<ACard
30-
variant="fill"
31-
color="danger"
32-
title="Card title"
33-
subtitle="Chocolate cake tiramisu donut"
34-
@click="ready && start()"
35-
>
36-
<div class="a-card-body a-card-spacer">
37-
<p class="text-sm">
38-
<ALoader
39-
:loading="!ready"
40-
overlay
41-
class="text-3xl"
42-
title="It's loading..."
43-
subtitle="Click to stop loading."
44-
@click.stop="stop()"
45-
/>
46-
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
47-
bar.
48-
</p>
49-
</div>
50-
</ACard>
40+
<div class="cards-demo-container">
41+
<ACard
42+
title="Card title"
43+
subtitle="Chocolate cake tiramisu donut"
44+
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()"
47+
/>
48+
</div>
5149

5250
<!-- Dialog -->
5351
<ADialog
@@ -83,44 +81,5 @@ const isDrawerShown = ref(false)
8381
<ABtn @click="isDrawerShown = true; start()">
8482
Show drawer
8583
</ABtn>
86-
87-
<div class="flex gap-6">
88-
<!-- Badge -->
89-
<ABadge :content="9">
90-
<ABtn
91-
:loading="!ready"
92-
@click="ready && start()"
93-
>
94-
Button
95-
</ABtn>
96-
</ABadge>
97-
98-
<!-- Button -->
99-
<ABtn
100-
:loading="!ready"
101-
icon="i-bx-wink-smile"
102-
@click="ready && start()"
103-
>
104-
Loading icon
105-
</ABtn>
106-
107-
<ABtn
108-
color="success"
109-
variant="light"
110-
class="text-2xl"
111-
:loading="!ready"
112-
icon-only
113-
icon="i-bx-dollar-circle"
114-
@click="ready && start()"
115-
/>
116-
117-
<!-- Input -->
118-
<AInput
119-
:loading="!ready"
120-
placeholder="Type to load"
121-
append-inner-icon="i-bx-check-double"
122-
@keypress="ready && start()"
123-
/>
124-
</div>
12584
</div>
12685
</template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const loading = ref(false)
1414
full-page
1515
title="Full page loading"
1616
subtitle="Click anywhere to stop loading"
17-
class="text-4xl bg-white dark:bg-dark"
17+
class="text-4xl"
1818
@click="loading = false"
1919
/>
2020
</template>

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ const loading = ref(true)
1818
Fruitcake I love liquorice apple pie croissant.
1919
<ALoader
2020
:loading="loading"
21-
overlay
2221
class="text-2xl"
2322
/>
2423
</AAlert>
@@ -30,7 +29,7 @@ const loading = ref(true)
3029
Fruitcake I love liquorice apple pie croissant.
3130
<ALoader
3231
:loading="loading"
33-
overlay
32+
3433
class="text-2xl"
3534
/>
3635
</AAlert>
@@ -42,8 +41,8 @@ const loading = ref(true)
4241
Fruitcake I love liquorice apple pie croissant.
4342
<ALoader
4443
:loading="loading"
45-
overlay
46-
class="text-2xl bg-white dark:bg-dark"
44+
45+
class="text-2xl "
4746
/>
4847
</AAlert>
4948
<AAlert
@@ -54,8 +53,8 @@ const loading = ref(true)
5453
Fruitcake I love liquorice apple pie croissant.
5554
<ALoader
5655
:loading="loading"
57-
overlay
58-
class="text-2xl bg-light dark:bg-dark"
56+
57+
class="text-2xl "
5958
/>
6059
</AAlert>
6160

@@ -70,7 +69,7 @@ const loading = ref(true)
7069
<p class="text-sm">
7170
<ALoader
7271
:loading="loading"
73-
overlay
72+
7473
class="text-3xl"
7574
title="It's loading..."
7675
subtitle="Click to stop loading."
@@ -87,7 +86,7 @@ const loading = ref(true)
8786
>
8887
<ALoader
8988
:loading="loading"
90-
overlay
89+
9190
class="text-3xl"
9291
title="It's loading..."
9392
subtitle="Click to stop loading."
@@ -112,14 +111,12 @@ const loading = ref(true)
112111
Primary
113112
<ALoader
114113
:loading="loading"
115-
overlay
116114
/>
117115
</AChip>
118116
<AChip class="relative">
119117
Primary
120118
<ALoader
121119
:loading="loading"
122-
overlay
123120
/>
124121
</AChip>
125122
<AChip
@@ -129,8 +126,8 @@ const loading = ref(true)
129126
Primary
130127
<ALoader
131128
:loading="loading"
132-
overlay
133-
class="bg-white dark:bg-dark"
129+
130+
class=""
134131
/>
135132
</AChip>
136133
<AChip
@@ -140,8 +137,7 @@ const loading = ref(true)
140137
Primary
141138
<ALoader
142139
:loading="loading"
143-
overlay
144-
class="bg-light dark:bg-dark"
140+
class=""
145141
/>
146142
</AChip>
147143
</div>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<template>
22
<div class="cards-demo-container">
3-
<ACard class="flex text-center justify-center p-6">
3+
<ACard
4+
title="Card title"
5+
subtitle="Chocolate cake tiramisu donut"
6+
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
7+
style="--a-loader-overlay-bg-opacity: 1"
8+
>
49
<ALoader
510
title="Heartbeat"
611
subtitle="Made with love with Anu"

0 commit comments

Comments
 (0)