arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 00:40: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

46
src/runtime/ui.config.ts
View File

@@ -1,5 +1,14 @@
// Data
const _popperArrowPresets = {
base: 'before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
}
export const table = {
wrapper: 'relative overflow-x-auto',
base: 'min-w-full table-fixed',
@@ -250,7 +259,7 @@ export const buttonGroup = {
export const dropdown = {
wrapper: 'relative inline-flex text-left rtl:text-right',
container: 'z-20',
container: 'z-20 group',
width: 'w-48',
height: '',
background: 'bg-white dark:bg-gray-800',
@@ -291,6 +300,11 @@ export const dropdown = {
popper: {
placement: 'bottom-end',
strategy: 'fixed'
},
arrow: {
..._popperArrowPresets,
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}
}
@@ -525,7 +539,7 @@ export const select = {
}
export const selectMenu = {
container: 'z-20',
container: 'z-20 group',
width: 'w-full',
height: 'max-h-60',
base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
@@ -576,6 +590,11 @@ export const selectMenu = {
},
default: {
selectedIcon: 'i-heroicons-check-20-solid'
},
arrow: {
..._popperArrowPresets,
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}
}
@@ -1009,25 +1028,18 @@ export const tooltip = {
popper: {
strategy: 'fixed'
},
arrow: {
base: 'before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-white dark:before:bg-gray-900',
shadow: 'before:shadow',
placement: 'group-data-[popper-placement=right]:-left-1 group-data-[popper-placement=left]:-right-1 group-data-[popper-placement=top]:-bottom-1 group-data-[popper-placement=bottom]:-top-1'
}
arrow: _popperArrowPresets
}
export const popover = {
wrapper: 'relative',
container: 'z-20',
container: 'z-20 group',
width: '',
background: 'bg-white dark:bg-gray-900',
shadow: 'shadow-lg',
rounded: 'rounded-md',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
base: 'overflow-hidden focus:outline-none',
base: 'overflow-hidden focus:outline-none relative',
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
transition: {
enterActiveClass: 'transition ease-out duration-200',
@@ -1039,18 +1051,19 @@ export const popover = {
},
popper: {
strategy: 'fixed'
}
},
arrow: _popperArrowPresets
}
export const contextMenu = {
wrapper: 'relative',
container: 'z-20',
container: 'z-20 group',
width: '',
background: 'bg-white dark:bg-gray-900',
shadow: 'shadow-lg',
rounded: 'rounded-md',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
base: 'overflow-hidden focus:outline-none',
base: 'overflow-hidden focus:outline-none relative',
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
transition: {
enterActiveClass: 'transition ease-out duration-200',
@@ -1063,7 +1076,8 @@ export const contextMenu = {
popper: {
placement: 'bottom-start',
scroll: false
}
},
arrow: _popperArrowPresets
}
export const notification = {