arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Slideover): add prevent-close prop

Browse Source
This commit is contained in:
Benjamin Canac
2023-07-12 15:59:11 +02:00
parent 2cc5c0d810
commit d15e8163e7
9 changed files with 265 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/components/content/examples/SlideoverExample.vue
View File

@@ -1,30 +0,0 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<div class="p-4 sm:p-6 flex flex-col flex-1 gap-4 sm:gap-6">
<div class="flex items-center justify-between">
<h2 class="font-semibold text-gray-900 dark:text-white">
Title
</h2>
<UButton
icon="i-heroicons-x-mark-20-solid"
color="gray"
variant="link"
size="md"
:padded="false"
@click="isOpen = false"
/>
</div>
<Placeholder class="flex-1 w-full" />
</div>
</USlideover>
</div>
</template>

15
docs/components/content/examples/SlideoverExampleBasic.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>

23
docs/components/content/examples/SlideoverExampleCard.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-full" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</USlideover>
</div>
</template>

15
docs/components/content/examples/SlideoverExampleDisableOverlay.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :overlay="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>

15
docs/components/content/examples/SlideoverExampleDisableTransition.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :transition="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>

24
docs/components/content/examples/SlideoverExamplePreventClose.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" prevent-close>
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Slideover
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-full" />
</UCard>
</USlideover>
</div>
</template>