Browse Source
fix: improve the dialog and drawer scrollbar experience, fix internal click failure problems and warnings (#4391)
fix: improve the dialog and drawer scrollbar experience, fix internal click failure problems and warnings (#4391)
* fix: improve the dialog and drawer scrollbar experience, fix internal click failure problems and warnings * chore: remove test codepull/4392/head
Vben
6 days ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 186 additions and 42 deletions
-
4packages/@core/base/design/src/css/global.css
-
19packages/@core/base/shared/src/utils/dom.ts
-
1packages/@core/composables/src/index.ts
-
48packages/@core/composables/src/use-scroll-lock.ts
-
10packages/@core/ui-kit/layout-ui/src/vben-layout.vue
-
1packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
-
4packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
-
19packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
-
2packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
-
13packages/@core/ui-kit/popup-ui/src/modal/modal.vue
-
2packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
-
1packages/@core/ui-kit/shadcn-ui/build.config.ts
-
1packages/@core/ui-kit/shadcn-ui/package.json
-
19packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
-
11packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
-
17packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
-
11packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
-
4packages/effects/layouts/src/basic/tabbar/tabbar.vue
-
3pnpm-lock.yaml
-
38scripts/turbo-run/src/run.ts
@ -0,0 +1,48 @@ |
|||
import { getScrollbarWidth } from '@vben-core/shared/utils'; |
|||
|
|||
import { |
|||
useScrollLock as _useScrollLock, |
|||
tryOnBeforeMount, |
|||
tryOnBeforeUnmount, |
|||
} from '@vueuse/core'; |
|||
|
|||
export const SCROLL_FIXED_CLASS = `_scroll__fixed_`; |
|||
|
|||
export function useScrollLock() { |
|||
const isLocked = _useScrollLock(document.body); |
|||
const scrollbarWidth = getScrollbarWidth(); |
|||
|
|||
tryOnBeforeMount(() => { |
|||
document.body.style.paddingRight = `${scrollbarWidth}px`; |
|||
|
|||
const layoutFixedNodes = document.querySelectorAll<HTMLElement>( |
|||
`.${SCROLL_FIXED_CLASS}`, |
|||
); |
|||
const nodes = [...layoutFixedNodes]; |
|||
if (nodes.length > 0) { |
|||
nodes.forEach((node) => { |
|||
node.dataset.transition = node.style.transition; |
|||
node.style.transition = 'none'; |
|||
node.style.paddingRight = `${scrollbarWidth}px`; |
|||
}); |
|||
} |
|||
isLocked.value = true; |
|||
}); |
|||
|
|||
tryOnBeforeUnmount(() => { |
|||
isLocked.value = false; |
|||
const layoutFixedNodes = document.querySelectorAll<HTMLElement>( |
|||
`.${SCROLL_FIXED_CLASS}`, |
|||
); |
|||
const nodes = [...layoutFixedNodes]; |
|||
if (nodes.length > 0) { |
|||
nodes.forEach((node) => { |
|||
node.style.paddingRight = ''; |
|||
requestAnimationFrame(() => { |
|||
node.style.transition = node.dataset.transition || ''; |
|||
}); |
|||
}); |
|||
} |
|||
document.body.style.paddingRight = ''; |
|||
}); |
|||
} |
@ -0,0 +1,11 @@ |
|||
<script setup lang="ts"> |
|||
import { useScrollLock } from '@vben-core/composables'; |
|||
|
|||
useScrollLock(); |
|||
</script> |
|||
<template> |
|||
<div |
|||
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]" |
|||
data-dismissable-modal="true" |
|||
></div> |
|||
</template> |
@ -0,0 +1,11 @@ |
|||
<script setup lang="ts"> |
|||
import { useScrollLock } from '@vben-core/composables'; |
|||
|
|||
useScrollLock(); |
|||
</script> |
|||
<template> |
|||
<div |
|||
class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]" |
|||
data-dismissable-modal="true" |
|||
></div> |
|||
</template> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue