-
Notifications
You must be signed in to change notification settings - Fork 462
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Slideover): open programmatically (#1465)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
- Loading branch information
1 parent
b0ecac5
commit e769759
Showing
10 changed files
with
173 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,6 +23,7 @@ | |
</template> | ||
</UNotifications> | ||
<UModals /> | ||
<USlideovers /> | ||
</div> | ||
</template> | ||
|
||
|
30 changes: 30 additions & 0 deletions
30
docs/components/content/examples/SlideoverExampleComponent.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<script lang="ts" setup> | ||
const props = defineProps({ | ||
count: { | ||
type: Number, | ||
default: 0 | ||
} | ||
}) | ||
const emits = defineEmits<{ | ||
close: []; | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<USlideover> | ||
<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"> | ||
Opened programmatically: {{ props.count }} times | ||
</h3> | ||
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" /> | ||
</div> | ||
</template> | ||
|
||
<Placeholder class="h-full" /> | ||
</UCard> | ||
</USlideover> | ||
</template> |
16 changes: 16 additions & 0 deletions
16
docs/components/content/examples/SlideoverExampleComposable.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<script setup lang="ts"> | ||
import { SlideoverExampleComponent } from '#components' | ||
const slideover = useSlideover() | ||
const count = ref(0) | ||
function openSlideover () { | ||
count.value += 1 | ||
slideover.open(SlideoverExampleComponent, { | ||
count: count.value, | ||
onClose: slideover.close | ||
}) | ||
} | ||
</script> | ||
|
||
<template> | ||
<UButton label="Reveal slideover" @click="openSlideover" /> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<template> | ||
<component | ||
:is="slideoverState.component" | ||
v-if="slideoverState" | ||
v-bind="slideoverState.props" | ||
v-model="isOpen" | ||
/> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { inject } from 'vue' | ||
import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideover' | ||
const slideoverState = inject(slidOverInjectionKey) | ||
const { isOpen } = useSlideover() | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { ref, inject } from 'vue' | ||
import { createSharedComposable } from '@vueuse/core' | ||
import type { ShallowRef, Component, InjectionKey } from 'vue' | ||
import type { ComponentProps } from '../types/component' | ||
import type { Slideover, SlideoverState } from '../types/slideover' | ||
|
||
export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = | ||
Symbol('nuxt-ui.slideover') | ||
|
||
function _useSlideover () { | ||
const slideoverState = inject(slidOverInjectionKey) | ||
const isOpen = ref(false) | ||
|
||
function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) { | ||
if (!slideoverState) { | ||
throw new Error('useSlideover() is called without provider') | ||
} | ||
|
||
slideoverState.value = { | ||
component, | ||
props: props ?? {} | ||
} | ||
|
||
isOpen.value = true | ||
} | ||
|
||
function close () { | ||
if (!slideoverState) return | ||
|
||
isOpen.value = false | ||
} | ||
|
||
/** | ||
* Allows updating the slideover props | ||
*/ | ||
function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) { | ||
if (!slideoverState) return | ||
|
||
slideoverState.value = { | ||
...slideoverState.value, | ||
props: { | ||
...slideoverState.value.props, | ||
...props | ||
} | ||
} | ||
} | ||
return { | ||
open, | ||
close, | ||
patch, | ||
isOpen | ||
} | ||
} | ||
|
||
export const useSlideover = createSharedComposable(_useSlideover) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { defineNuxtPlugin } from '#imports' | ||
import { shallowRef } from 'vue' | ||
import { slidOverInjectionKey } from '../composables/useSlideover' | ||
import type { SlideoverState } from '../types/slideover' | ||
|
||
export default defineNuxtPlugin((nuxtApp) => { | ||
const slideoverState = shallowRef<SlideoverState>({ | ||
component: 'div', | ||
props: {} | ||
}) | ||
|
||
nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverState) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import type { Component } from 'vue' | ||
|
||
interface Slideover { | ||
ui?: any; | ||
side?: 'right' | 'left'; | ||
transition?: boolean; | ||
appear?: boolean; | ||
overlay?: boolean; | ||
preventClose?: boolean; | ||
modelValue?: boolean; | ||
} | ||
|
||
interface SlideoverState { | ||
component: Component | string; | ||
props: Slideover; | ||
} | ||
|