arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 13:17:57 +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>

22
docs/content/6.overlays/1.modal.md
View File

@@ -68,6 +68,8 @@ const isOpen = ref(false)
### Disable overlay ### Disable overlay
Set the `overlay` prop to `false` to disable it.
::component-example ::component-example
#default #default
:modal-example-disable-overlay :modal-example-disable-overlay
@@ -94,6 +96,8 @@ const isOpen = ref(false)
### Disable transition ### Disable transition
Set the `transition` prop to `false` to disable it.
::component-example ::component-example
#default #default
:modal-example-disable-transition :modal-example-disable-transition
@@ -120,6 +124,8 @@ const isOpen = ref(false)
### Prevent close ### Prevent close
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
::component-example ::component-example
#default #default
:modal-example-prevent-close :modal-example-prevent-close
@@ -153,6 +159,22 @@ const isOpen = ref(false)
``` ```
:: ::
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
```vue
<script setup>
const isOpen = ref(false)
defineShortcuts({
escape: {
usingInput: true,
whenever: [isOpen],
handler: () => { isOpen.value = false }
}
})
</script>
```
## Props ## Props
:component-props :component-props

147
docs/content/6.overlays/2.slideover.md
View File

@@ -8,9 +8,11 @@ headlessui:
## Usage ## Usage
Use a `v-model` to control the Slideover state.
::component-example ::component-example
#default #default
:slideover-example :slideover-example-basic
#code #code
```vue ```vue
<script setup> <script setup>
@@ -29,6 +31,149 @@ const isOpen = ref(false)
``` ```
:: ::
You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
::component-example
#default
:slideover-example-card
#code
```vue
<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>
<!-- Content -->
</template>
<!-- Content -->
<template #footer>
<!-- Content -->
</template>
</UCard>
</USlideover>
</div>
</template>
```
::
### Disable overlay
Set the `overlay` prop to `false` to disable it.
::component-example
#default
:slideover-example-disable-overlay
#code
```vue
<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>
```
::
### Disable transition
Set the `transition` prop to `false` to disable it.
::component-example
#default
:slideover-example-disable-transition
#code
```vue
<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>
```
::
### Prevent close
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
::component-example
#default
:slideover-example-prevent-close
#code
```vue
<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>
```
::
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
```vue
<script setup>
const isOpen = ref(false)
defineShortcuts({
escape: {
usingInput: true,
whenever: [isOpen],
handler: () => { isOpen.value = false }
}
})
</script>
```
## Props ## Props
:component-props :component-props

6
src/runtime/components/overlays/Slideover.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<TransitionRoot as="template" :appear="appear" :show="isOpen"> <TransitionRoot as="template" :appear="appear" :show="isOpen">
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="close"> <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="(e) => !preventClose && close(e)">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition"> <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" /> <div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild> </TransitionChild>
@@ -55,6 +55,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: true default: true
}, },
preventClose: {
type: Boolean,
default: false
},
ui: { ui: {
type: Object as PropType<Partial<typeof appConfig.ui.slideover>>, type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
default: () => appConfig.ui.slideover default: () => appConfig.ui.slideover