From 28b4bfeaa8a5e4afa9a7762334123c3f85816218 Mon Sep 17 00:00:00 2001 From: John Leider Date: Sun, 26 Mar 2023 18:00:00 -0500 Subject: [PATCH] feat(VBottomSheet): port to v3 --- .../components/VBottomSheet/VBottomSheet.sass | 29 ++++--- .../components/VBottomSheet/VBottomSheet.ts | 31 -------- .../components/VBottomSheet/VBottomSheet.tsx | 77 +++++++++++++++++++ .../components/VBottomSheet/_variables.scss | 2 +- .../src/components/VBottomSheet/index.ts | 5 +- .../src/components/VDialog/VDialog.tsx | 34 ++++---- packages/vuetify/src/components/index.ts | 2 +- 7 files changed, 117 insertions(+), 63 deletions(-) delete mode 100644 packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts create mode 100644 packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass index b202f2006f3..69d72605883 100644 --- a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass +++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass @@ -1,23 +1,32 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * // Transition .bottom-sheet-transition - &-enter + &-enter-from transform: translateY(100%) &-leave-to transform: translateY(100%) // Block -.v-bottom-sheet.v-dialog - align-self: flex-end - border-radius: 0 - flex: 0 1 auto - margin: 0 - overflow: visible +.v-bottom-sheet + > .v-bottom-sheet__content.v-overlay__content + align-self: flex-end + border-radius: 0 + flex: 0 1 auto + left: 0 + right: 0 + margin-inline-start: 0 + margin-inline-end: 0 + margin-bottom: 0 + transition-duration: .3s + width: 100% + max-width: 100% + overflow: visible &.v-bottom-sheet--inset max-width: none - @media #{map-get($display-breakpoints, 'sm-and-up')} - max-width: $bottom-sheet-inset-width + // @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} + // max-width: $bottom-sheet-inset-width diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts deleted file mode 100644 index f97093bab35..00000000000 --- a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts +++ /dev/null @@ -1,31 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ - -import './VBottomSheet.sass' - -// Extensions -import VDialog from '../VDialog/VDialog' - -/* @vue/component */ -export default VDialog.extend({ - name: 'v-bottom-sheet', - - props: { - inset: Boolean, - maxWidth: [String, Number], - transition: { - type: String, - default: 'bottom-sheet-transition', - }, - }, - - computed: { - classes (): object { - return { - ...VDialog.options.computed.classes.call(this), - 'v-bottom-sheet': true, - 'v-bottom-sheet--inset': this.inset, - } - }, - }, -}) diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx new file mode 100644 index 00000000000..f1bb833c22d --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx @@ -0,0 +1,77 @@ +// Styles +import './VBottomSheet.sass' + +// Components +import { makeVDialogProps, VDialog } from '@/components/VDialog/VDialog' + +// Utilities +import { genericComponent, useRender } from '@/util' + +export const VBottomSheet = genericComponent()({ + name: 'VBottomSheet', + + props: { + inset: Boolean, + + ...makeVDialogProps({ + contentClass: 'v-bottom-sheet__content', + transition: 'bottom-sheet-transition', + }), + }, + + setup (props, { slots }) { + useRender(() => { + const [dialogProps] = VDialog.filterProps(props) + + return ( + + {{ + activator: slots.activator, + default: slots.default, + }} + + ) + }) + + return {} + }, +}) + +export type VBottomSheet = InstanceType + +// import './VBottomSheet.sass' + +// // Extensions +// import VDialog from '../VDialog/VDialog' + +// /* @vue/component */ +// export default VDialog.extend({ +// name: 'v-bottom-sheet', + +// props: { +// inset: Boolean, +// maxWidth: [String, Number], +// transition: { +// type: String, +// default: 'bottom-sheet-transition', +// }, +// }, + +// computed: { +// classes (): object { +// return { +// ...VDialog.options.computed.classes.call(this), +// 'v-bottom-sheet': true, +// 'v-bottom-sheet--inset': this.inset, +// } +// }, +// }, +// }) diff --git a/packages/vuetify/src/components/VBottomSheet/_variables.scss b/packages/vuetify/src/components/VBottomSheet/_variables.scss index a989b8a469a..0b4f2d212b6 100644 --- a/packages/vuetify/src/components/VBottomSheet/_variables.scss +++ b/packages/vuetify/src/components/VBottomSheet/_variables.scss @@ -1,3 +1,3 @@ -@import '../../styles/styles.sass'; +@use '../../styles/settings'; $bottom-sheet-inset-width: 70% !default; diff --git a/packages/vuetify/src/components/VBottomSheet/index.ts b/packages/vuetify/src/components/VBottomSheet/index.ts index 13dcfc4c43c..4b6fbc2ab6b 100644 --- a/packages/vuetify/src/components/VBottomSheet/index.ts +++ b/packages/vuetify/src/components/VBottomSheet/index.ts @@ -1,4 +1 @@ -import VBottomSheet from './VBottomSheet' - -export { VBottomSheet } -export default VBottomSheet +export { VBottomSheet } from './VBottomSheet' diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx index bb6b72d7c39..cf60884c679 100644 --- a/packages/vuetify/src/components/VDialog/VDialog.tsx +++ b/packages/vuetify/src/components/VDialog/VDialog.tsx @@ -13,30 +13,32 @@ import { forwardRefs } from '@/composables/forwardRefs' // Utilities import { computed, mergeProps, nextTick, ref, watch } from 'vue' -import { genericComponent, IN_BROWSER, useRender } from '@/util' +import { genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util' import { makeVOverlayProps } from '@/components/VOverlay/VOverlay' // Types import type { OverlaySlots } from '@/components/VOverlay/VOverlay' +export const makeVDialogProps = propsFactory({ + fullscreen: Boolean, + retainFocus: { + type: Boolean, + default: true, + }, + scrollable: Boolean, + + ...makeVOverlayProps({ + origin: 'center center' as const, + scrollStrategy: 'block' as const, + transition: { component: VDialogTransition }, + zIndex: 2400, + }), +}, 'VDialog') + export const VDialog = genericComponent()({ name: 'VDialog', - props: { - fullscreen: Boolean, - retainFocus: { - type: Boolean, - default: true, - }, - scrollable: Boolean, - - ...makeVOverlayProps({ - origin: 'center center' as const, - scrollStrategy: 'block' as const, - transition: { component: VDialogTransition }, - zIndex: 2400, - }), - }, + props: makeVDialogProps(), emits: { 'update:modelValue': (value: boolean) => true, diff --git a/packages/vuetify/src/components/index.ts b/packages/vuetify/src/components/index.ts index ea31538fce5..7a0f27c7871 100644 --- a/packages/vuetify/src/components/index.ts +++ b/packages/vuetify/src/components/index.ts @@ -6,7 +6,7 @@ export * from './VAvatar' export * from './VBadge' export * from './VBanner' export * from './VBottomNavigation' -// export * from './VBottomSheet' +export * from './VBottomSheet' export * from './VBreadcrumbs' export * from './VBtn' export * from './VBtnGroup'