feat(VBottomSheet): port to v3

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

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 (
+        <VDialog
+          class={[
+            'v-bottom-sheet',
+            {
+              'v-bottom-sheet--inset': props.inset,
+            },
+          ]}
+          { ...dialogProps }
+        >
+          {{
+            activator: slots.activator,
+            default: slots.default,
+          }}
+        </VDialog>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VBottomSheet = InstanceType<typeof VBottomSheet>
+
+// 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,
+//       }
+//     },
+//   },
+// })

packages/vuetify/src/components/VBottomSheet/_variables.scss

@@ -1,3 +1,3 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
 $bottom-sheet-inset-width: 70% !default;

packages/vuetify/src/components/VBottomSheet/index.ts

@@ -1,4 +1 @@
-import VBottomSheet from './VBottomSheet'
-
-export { VBottomSheet }
-export default VBottomSheet
+export { VBottomSheet } from './VBottomSheet'

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<OverlaySlots>()({
   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,

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'