Skip to content

Commit d0fb060

Browse files
ManUtopiKjd-solanki
ManUtopiK
and
jd-solanki
authored
feat(ALoader): new component (#119)
Co-authored-by: JD Solanki <jdsolanki0001@gmail.com>
1 parent a11c4bc commit d0fb060

34 files changed

+4028
-1316
lines changed

‎.vscode/extensions.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"exodiusstudios.comment-anchors",
1212
"davidanson.vscode-markdownlint",
1313
"yzhang.markdown-all-in-one",
14-
"streetsidesoftware.code-spell-checker"
14+
"streetsidesoftware.code-spell-checker",
15+
"matijao.vue-nuxt-snippets"
1516
]
1617
}

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export default defineConfig({
6666
{ text: 'Drawer', link: '/guide/components/drawer' },
6767
{ text: 'Input', link: '/guide/components/input' },
6868
{ text: 'List', link: '/guide/components/list' },
69+
{ text: 'Loader', link: '/guide/components/loader' },
6970
{ text: 'Menu', link: '/guide/components/menu' },
7071
{ text: 'Radio', link: '/guide/components/radio' },
7172
{ text: 'Rating', link: '/guide/components/rating' },

‎docs/components/demos/button/DemoButtonFilled.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="flex flex-wrap gap-4">
3-
<ABtn>Primary</ABtn>
3+
<ABtn>
4+
Primary
5+
</ABtn>
46

57
<ABtn color="success">
68
Success

‎docs/components/demos/button/DemoButtonLoading.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
const loading = ref(false)
5+
</script>
6+
7+
<template>
8+
<div class="flex flex-wrap gap-6">
9+
<ABtn
10+
:loading="loading"
11+
color="danger"
12+
@click="loading = !loading"
13+
>
14+
Click to load
15+
</ABtn>
16+
<ABtn
17+
:loading="loading"
18+
variant="outline"
19+
@click="loading = !loading"
20+
>
21+
Click to load
22+
</ABtn>
23+
<ABtn
24+
:loading="loading"
25+
color="success"
26+
variant="light"
27+
@click="loading = !loading"
28+
>
29+
Click to load
30+
</ABtn>
31+
<ABtn
32+
:loading="loading"
33+
class="flex-1"
34+
@click="loading = !loading"
35+
>
36+
Click to load
37+
</ABtn>
38+
<ABtn
39+
:loading="loading"
40+
icon="i-bx-wink-smile"
41+
@click="loading = !loading"
42+
>
43+
Loading icon button
44+
</ABtn>
45+
46+
<ABtn
47+
:loading="loading"
48+
color="info"
49+
variant="light"
50+
class="text-2xl"
51+
icon-only
52+
icon="i-bx-dollar-circle"
53+
@click="loading = !loading"
54+
/>
55+
</div>
56+
</template>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div class="flex flex-col gap-4">
3+
<ALoader />
4+
<p>You can also use the component <ALoader /> inline.</p>
5+
</div>
6+
</template>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="flex justify-between text-4xl">
3+
<ALoader color="primary" />
4+
<ALoader color="success" />
5+
<ALoader color="info" />
6+
<ALoader color="warning" />
7+
<ALoader color="danger" />
8+
9+
<p class="text-orange-500 flex gap-2">
10+
Orange text <ALoader />
11+
</p>
12+
</div>
13+
</template>

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

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<script lang="ts" setup>
2+
import { useTimeout } from '@vueuse/core'
3+
import { ref } from 'vue'
4+
5+
const { ready, start, stop } = useTimeout(1000, { controls: true })
6+
7+
const isDialogShown = ref(false)
8+
const isDrawerShown = ref(false)
9+
</script>
10+
11+
<template>
12+
<div class="flex flex-wrap gap-6">
13+
<!-- Alert -->
14+
<AAlert
15+
color="info"
16+
variant="fill"
17+
class="relative"
18+
@click="ready && start()"
19+
>
20+
AAlert component. Click to start loading...
21+
<ALoader
22+
:loading="!ready"
23+
overlay
24+
class="text-2xl"
25+
/>
26+
</AAlert>
27+
28+
<!-- 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>
51+
52+
<!-- Dialog -->
53+
<ADialog
54+
v-model="isDialogShown"
55+
title="Dialog title"
56+
subtitle="Chocolate cake tiramisu donut"
57+
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
58+
>
59+
<ALoader
60+
:loading="!ready"
61+
overlay
62+
class="text-6xl bg-white"
63+
/>
64+
</ADialog>
65+
66+
<ABtn @click="isDialogShown = true; start()">
67+
Show dialog
68+
</ABtn>
69+
70+
<!-- Drawer -->
71+
<ADrawer
72+
v-model="isDrawerShown"
73+
title="Drawer title"
74+
subtitle="Chocolate cake tiramisu donut"
75+
>
76+
<ALoader
77+
:loading="!ready"
78+
overlay
79+
class="text-6xl bg-white"
80+
/>
81+
</ADrawer>
82+
83+
<ABtn @click="isDrawerShown = true; start()">
84+
Show drawer
85+
</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>
125+
</div>
126+
</template>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="flex gap-8 text-3xl">
3+
<ALoader class="[--a-ring-stroke:10] [--a-arc-stroke:10]" />
4+
5+
<ALoader
6+
color="primary"
7+
class="[--a-ring-color:hsla(var(--a-base-color),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
8+
/>
9+
10+
<ALoader class="[--a-ring-stroke:0] [&_.a-spinner-arc]-stroke-cap-round rotate-y-180" />
11+
12+
<ALoader class="[--a-ring-stroke:180] [--a-arc-stroke:10] [--a-ring-opacity:.5] [--a-arc-color:white] dark:[--a-arc-color:black] animate-pulse-alt" />
13+
14+
<ALoader
15+
color="success"
16+
class="[--a-ring-stroke:0] hover:[--a-spin-duration:4s] stroke-cap-round animate-circular-dash"
17+
/>
18+
19+
<ALoader
20+
color="primary"
21+
class="[--a-ring-stroke:200] [--a-arc-stroke:200] animate-circular-dash"
22+
/>
23+
</div>
24+
</template>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
const loading = ref(false)
5+
</script>
6+
7+
<template>
8+
<ABtn @click="loading = !loading">
9+
Loading in full page mode
10+
</ABtn>
11+
12+
<ALoader
13+
:loading="loading"
14+
full-page
15+
title="Full page loading"
16+
subtitle="Click anywhere to stop loading"
17+
class="text-4xl bg-white dark:bg-dark"
18+
@click="loading = false"
19+
/>
20+
</template>

0 commit comments

Comments
 (0)