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

feat(popper): arrow option & docs consistency across components (#875)

Browse Source
This commit is contained in:
Conner
2023-10-27 08:03:06 -05:00
committed by GitHub
parent 4ce23746da
commit f785ecd46f
22 changed files with 412 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/components/content/examples/ContextMenuExampleArrow.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
const top = unref(y) - unref(windowY)
const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({
width: 0,
height: 0,
top,
left
})
isOpen.value = true
}
</script>
<template>
<div class="w-full" @contextmenu.prevent="onContextMenu">
<Placeholder class="h-96 select-none w-full flex items-center justify-center">
Right click here
</Placeholder>
<UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ arrow: true, placement: 'right' }">
<div class="p-4">
Menu
</div>
</UContextMenu>
</div>
</template>

35
docs/components/content/examples/ContextMenuExampleOffset.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
const top = unref(y) - unref(windowY)
const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({
width: 0,
height: 0,
top,
left
})
isOpen.value = true
}
</script>
<template>
<div class="w-full" @contextmenu.prevent="onContextMenu">
<Placeholder class="h-96 select-none w-full flex items-center justify-center">
Right click here
</Placeholder>
<UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ offset: 0 }">
<div class="p-4">
Menu
</div>
</UContextMenu>
</div>
</template>

35
docs/components/content/examples/ContextMenuExamplePlacement.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
const top = unref(y) - unref(windowY)
const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({
width: 0,
height: 0,
top,
left
})
isOpen.value = true
}
</script>
<template>
<div class="w-full" @contextmenu.prevent="onContextMenu">
<Placeholder class="h-96 select-none w-full flex items-center justify-center">
Right click here
</Placeholder>
<UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ placement: 'right-start' }">
<div class="p-4">
Menu
</div>
</UContextMenu>
</div>
</template>

16
docs/components/content/examples/DropdownExampleArrow.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}]
]
</script>
<template>
<UDropdown :items="items" :popper="{ arrow: true }">
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
</template>

16
docs/components/content/examples/DropdownExampleOffset.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}]
]
</script>
<template>
<UDropdown :items="items" :popper="{ offsetDistance: 0, placement: 'right-start' }">
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
</template>

16
docs/components/content/examples/DropdownExamplePlacement.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}]
]
</script>
<template>
<UDropdown :items="items" :popper="{ placement: 'right-start' }">
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
</template>

11
docs/components/content/examples/PopoverExampleArrow.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<UPopover :popper="{ arrow: true }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>

11
docs/components/content/examples/PopoverExampleOffset.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<UPopover :popper="{ offsetDistance: 0 }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>

11
docs/components/content/examples/PopoverExamplePlacement.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<UPopover :popper="{ placement: 'top-end' }">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>

9
docs/components/content/examples/SelectMenuExampleArrow.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup>
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
const selected = ref(people[0])
</script>
<template>
<USelectMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
</template>

9
docs/components/content/examples/SelectMenuExampleOffset.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup>
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
const selected = ref(people[0])
</script>
<template>
<USelectMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
</template>

9
docs/components/content/examples/SelectMenuExamplePlacement.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup>
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
const selected = ref(people[0])
</script>
<template>
<USelectMenu v-model="selected" :options="people" :popper="{ placement: 'left-end' }" />
</template>

16
docs/content/2.elements/6.dropdown.md
View File

@@ -32,6 +32,22 @@ Use the `mode` prop to switch between `click` and `hover` modes.
:component-example{component="dropdown-example-mode"}
## Popper
Use the `popper` prop to customize the popper instance.
### Arrow
:component-example{component="dropdown-example-arrow"}
### Placement
:component-example{component="dropdown-example-placement"}
### Offset
:component-example{component="dropdown-example-offset"}
## Slots
### `item`

16
docs/content/3.forms/4.select-menu.md
View File

@@ -91,6 +91,22 @@ Try to search for something that doesn't exist in the example below.
:component-example{component="select-menu-example-creatable" :componentProps='{"class": "w-full lg:w-40"}'}
## Popper
Use the `popper` prop to customize the popper instance.
### Arrow
:component-example{component="select-menu-example-arrow"}
### Placement
:component-example{component="select-menu-example-placement"}
### Offset
:component-example{component="select-menu-example-offset"}
## Slots
### `label`

16
docs/content/6.overlays/3.popover.md
View File

@@ -25,6 +25,22 @@ Use the `open` prop to manually control showing the panel.
:component-example{component="popover-example-open"}
## Popper
Use the `popper` prop to customize the popper instance.
### Arrow
:component-example{component="popover-example-arrow"}
### Placement
:component-example{component="popover-example-placement"}
### Offset
:component-example{component="popover-example-offset"}
## Slots
### `panel`

2
docs/content/6.overlays/4.tooltip.md
View File

@@ -12,7 +12,7 @@ links:
## Popper
Use the `popper` prop to customize the tootip.
Use the `popper` prop to customize the popper instance.
### Arrow

16
docs/content/6.overlays/5.context-menu.md
View File

@@ -11,6 +11,22 @@ links:
:component-example{component="context-menu-example"}
## Popper
Use the `popper` prop to customize the popper instance.
### Arrow
:component-example{component="context-menu-example-arrow"}
### Placement
:component-example{component="context-menu-example-placement"}
### Offset
:component-example{component="context-menu-example-offset"}
## Props
:component-props