Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(loader): loader component improvements #130

Merged
merged 5 commits into from
Feb 8, 2023
Merged

feat(loader): loader component improvements #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee7b93f
wip
jd-solanki Feb 7, 2023
a6f5ef6
fix(btn): btn styles for loader updated
jd-solanki Feb 7, 2023
fe59052
perf(btn): don't render spinner if not using loading prop
jd-solanki Feb 8, 2023
01facaf
fix(spinner): sizing issue resolved via `shrink-0`
jd-solanki Feb 8, 2023
e21f3c8
feat(loader): loader component issues resolved
jd-solanki Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 13 additions & 148 deletions docs/components/Playground.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,21 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ref } from 'vue'

const loading = ref(true)

onMounted(() => {
setTimeout(() => {
loading.value = false
}, 5000)
})
const val = ref('')
const loading = ref(false)
</script>

<template>
<div class="flex flex-wrap gap-6">
<!-- Alert -->
<AAlert
color="info"
class="relative"
>
Fruitcake I love liquorice apple pie croissant.
<ALoader
:loading="loading"
class="text-2xl"
/>
</AAlert>
<AAlert
color="info"
variant="fill"
class="relative"
>
Fruitcake I love liquorice apple pie croissant.
<ALoader
:loading="loading"

class="text-2xl"
/>
</AAlert>
<AAlert
color="info"
variant="outline"
class="relative"
>
Fruitcake I love liquorice apple pie croissant.
<ALoader
:loading="loading"

class="text-2xl bg-white dark:bg-dark"
/>
</AAlert>
<AAlert
color="info"
variant="text"
class="relative"
>
Fruitcake I love liquorice apple pie croissant.
<ALoader
:loading="loading"

class="text-2xl bg-light dark:bg-dark"
/>
</AAlert>

<!-- Card -->
<ACard
variant="fill"
color="danger"
title="Card title"
subtitle="Chocolate cake tiramisu donut"
>
<div class="a-card-body a-card-spacer">
<p class="text-sm">
<ALoader
:loading="loading"

class="text-3xl"
title="It's loading..."
subtitle="Click to stop loading."
/>
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
bar.
</p>
</div>
</ACard>

<ACard
variant="light"
color="danger"
>
<ALoader
<AInput
v-model="val"
class="w-300px m-4"
@input="loading = !loading"
>
<template #prepend-inner>
<ALoadingIcon
icon="i-bx-search"
:loading="loading"

class="text-3xl"
title="It's loading..."
subtitle="Click to stop loading."
/>
<div class="a-card-body a-card-spacer">
<ATypography
title="Card title"
subtitle="Chocolate cake tiramisu donut"
/>
<p class="text-sm">
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate
bar.
</p>
</div>
</ACard>

<div class="flex gap-x-2">
<AChip
variant="fill"
class="relative"
>
Primary
<ALoader
:loading="loading"
/>
</AChip>
<AChip class="relative">
Primary
<ALoader
:loading="loading"
/>
</AChip>
<AChip
variant="outline"
class="relative"
>
Primary
<ALoader
:loading="loading"

class="bg-white dark:bg-dark"
/>
</AChip>
<AChip
variant="text"
class="relative"
>
Primary
<ALoader
:loading="loading"
class="bg-light dark:bg-dark"
/>
</AChip>
</div>

<div class="w-full flex gap-6">
<ABtn
:loading="loading"
variant="fill"
>
Button
</ABtn>
</div>
</div>
</template>
</AInput>
</template>
67 changes: 9 additions & 58 deletions docs/components/demos/loader/DemoLoaderComponents.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,36 @@
<script lang="ts" setup>
import { useTimeout } from '@vueuse/core'
import { ref } from 'vue'

const { ready, start, stop } = useTimeout(1000, { controls: true })

const isDialogShown = ref(false)
const isDrawerShown = ref(false)
const btnLoading = ref(false)
const iconBtnLoading = ref(false)
const cardLoading = ref(false)
</script>

<template>
<div class="flex flex-wrap gap-6">
<ABtn
:loading="!ready"
@click="ready && start()"
:loading="btnLoading"
@click="btnLoading = !btnLoading"
>
Button
</ABtn>

<ABtn
:loading="!ready"
:loading="iconBtnLoading"
icon-only
icon="i-bx-cloud-upload"
@click="ready && start()"
@click="iconBtnLoading = !iconBtnLoading"
/>

<!-- Alert -->
<AAlert
variant="fill"
class="relative"
@click="ready && start()"
>
Fruitcake I love liquorice apple pie croissant.
<ALoader
:loading="!ready"
/>
</AAlert>

<!-- Card -->
<div class="cards-demo-container">
<ACard
title="Card title"
subtitle="Chocolate cake tiramisu donut"
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
:loading="!ready"
@click="ready && start()"
:loading="cardLoading"
@click="cardLoading = !cardLoading"
/>
</div>

<!-- Dialog -->
<ADialog
v-model="isDialogShown"
title="Dialog title"
subtitle="Chocolate cake tiramisu donut"
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
>
<ALoader
:loading="!ready"
overlay
class="text-6xl bg-white"
/>
</ADialog>

<ABtn @click="isDialogShown = true; start()">
Show dialog
</ABtn>

<!-- Drawer -->
<ADrawer
v-model="isDrawerShown"
title="Drawer title"
subtitle="Chocolate cake tiramisu donut"
>
<ALoader
:loading="!ready"
overlay
class="text-6xl bg-white"
/>
</ADrawer>

<ABtn @click="isDrawerShown = true; start()">
Show drawer
</ABtn>
</div>
</template>
1 change: 0 additions & 1 deletion docs/components/demos/loader/DemoLoaderFullPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const loading = ref(false)
full-page
title="Full page loading"
subtitle="Click anywhere to stop loading"
class="text-4xl"
@click="loading = false"
/>
</template>
49 changes: 49 additions & 0 deletions docs/components/demos/loader/DemoLoaderLoader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<script lang="ts" setup>
import { useTimeout } from '@vueuse/core'
import { ref } from 'vue'

const { ready, start } = useTimeout(1000, { controls: true })

const alertLoading = ref(false)

const isDialogShown = ref(false)
const isDrawerShown = ref(false)
</script>

<template>
<div class="flex flex-wrap gap-6">
<!-- Alert -->
<AAlert
variant="fill"
class="relative"
icon="i-bx-info-circle"
@click="alertLoading = !alertLoading"
>
Click me to toggle loading
<ALoader :loading="alertLoading" />
</AAlert>
<!-- Dialog -->
<ADialog
v-model="isDialogShown"
title="Dialog title"
subtitle="Chocolate cake tiramisu donut"
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
:loading="!ready"
class="[--a-loader-overlay-bg-opacity:1]"
/>
<ABtn @click="isDialogShown = true; start()">
Show dialog
</ABtn>
<!-- Drawer -->
<ADrawer
v-model="isDrawerShown"
title="Drawer title"
subtitle="Chocolate cake tiramisu donut"
:loading="!ready"
class="[--a-loader-overlay-bg-opacity:1]"
/>
<ABtn @click="isDrawerShown = true; start()">
Show drawer
</ABtn>
</div>
</template>
Loading