chore: init

packages/vuetify/src/labs/VFab/VFab.sass

@@ -0,0 +1,59 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use 'sass:math'
+@use 'sass:map'
+@use './variables' as *
+@use './mixins' as *
+
+.v-fab
+  display: inline-flex
+  transition-duration: $fab-transition-duration
+  transition-timing-function: $fab-transition-timing-function
+
+  .v-btn
+    @include tools.elevation(3)
+
+  &--app
+    display: flex
+
+    .v-btn
+      margin: 4px
+
+  &--left,
+  &--right,
+  &--start,
+  &--end
+    flex-direction: column
+
+    .v-btn--fab-center
+      margin-top: auto
+      margin-bottom: auto
+
+    .v-btn--fab-start
+      margin-bottom: auto
+
+    .v-btn--fab-end
+      margin-top: auto
+
+  &--bottom,
+  &--top
+    flex-direction: row
+
+    .v-btn--fab-center
+      margin-inline-start: auto
+      margin-inline-end: auto
+
+    .v-btn--fab-start
+      margin-inline-end: auto
+
+    .v-btn--fab-end
+      margin-inline-start: auto
+
+  &--extended
+    .v-btn
+      // min-height: 56px
+      // min-width: 80px
+      border-radius: 9999px !important
+
+  @at-root
+    @include fab-sizes()

packages/vuetify/src/labs/VFab/VFab.tsx

@@ -0,0 +1,118 @@
+// Styles
+import './VFab.sass'
+
+// Components
+import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'
+
+// Composables
+import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
+import { makeLocationProps, useLocation } from '@/composables/location'
+import { useProxiedModel } from '@/composables/proxiedModel'
+import { useResizeObserver } from '@/composables/resizeObserver'
+
+// Utilities
+import { computed, onMounted, ref, shallowRef, toRef, toRefs, watch, watchEffect } from 'vue'
+import { useRtl } from '../entry-bundler'
+import { convertToUnit, genericComponent, propsFactory, toPhysical, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+
+const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const
+
+export const makeVFabProps = propsFactory({
+  app: {
+    type: String as PropType<typeof locations[number]>,
+    validator: (value: any) => locations.includes(value),
+  },
+  extended: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+
+  ...makeVBtnProps(),
+  ...makeLayoutItemProps(),
+
+  location: {
+    type: String as PropType<typeof locations[number]>,
+    default: 'bottom',
+    validator: (value: any) => locations.includes(value),
+  },
+}, 'VFab')
+
+export const VFab = genericComponent()({
+  name: 'VFab',
+
+  props: makeVFabProps(),
+
+  emits: {
+    'update:modelValue': (value: boolean) => true,
+  },
+
+  setup (props, { slots }) {
+    const isActive = useProxiedModel(props, 'modelValue')
+    const { isRtl } = useRtl()
+    const height = shallowRef(56)
+    const { resizeRef } = useResizeObserver(entries => {
+      if (!entries.length) return
+      height.value = entries[0].target.clientHeight
+    })
+    const position = computed(() => {
+      return toPhysical(props.app, isRtl.value) as 'top' | 'right' | 'bottom' | 'left'
+    })
+    const { layoutItemStyles } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position,
+      layoutSize: height,
+      elementSize: computed(() => height.value + 8),
+      active: computed(() => !!props.app && isActive.value),
+      absolute: toRef(props, 'absolute'),
+    })
+
+    const vFabRef = ref()
+
+    useRender(() => {
+      const btnProps = VBtn.filterProps(props)
+
+      return (
+        <div
+          ref={ vFabRef }
+          class={[
+            'v-fab',
+            {
+              'v-fab--app': !!props.app,
+              'v-fab--extended': props.extended,
+              [`v-fab--${props.app}`]: !!props.app,
+            },
+            props.class,
+          ]}
+          style={[
+            props.app ? {
+              ...layoutItemStyles.value,
+            } : {
+              height: undefined,
+              width: undefined,
+            },
+            props.style,
+          ]}
+        >
+          <VBtn
+            ref={ resizeRef }
+            { ...btnProps }
+            class={[
+              {
+                [`v-btn--fab-${props.location}`]: !!props.location,
+              },
+            ]}
+            location={ undefined }
+            v-slots={ slots }
+          />
+        </div>
+      )
+    })
+
+    return {}
+  },
+})

packages/vuetify/src/labs/VFab/_mixins.scss

@@ -0,0 +1,20 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './variables' as *;
+
+@mixin fab-sizes ($immediate: false) {
+  @each $sizeName, $multiplier in $fab-size-scales {
+    $size: $fab-font-size + math.div(2 * $multiplier, 16);
+    $height: $fab-height + (settings.$size-scale * $multiplier);
+
+    .v-fab .v-btn--size-#{$sizeName} {
+      --v-btn-size: #{$size};
+      --v-btn-height: #{$height};
+
+      border-radius: math.round($fab-border-radius + ($fab-border-radius-multiplier * $multiplier));
+    }
+  }
+}

packages/vuetify/src/labs/VFab/_variables.scss

@@ -0,0 +1,20 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$fab-border-radius: map.get(settings.$rounded, 'circle') !default;
+$fab-border-radius-multiplier: 0 !default; // 2.4 for MD3
+$fab-height: 44px !default;
+$fab-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !default;
+$fab-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default;
+$fab-transition-duration: 0.2s !default;
+$fab-transition-timing-function: settings.$standard-easing !default;
+
+$fab-size-scales: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 2,
+  'x-large': 5
+) !default;

packages/vuetify/src/labs/VFab/index.ts

@@ -0,0 +1 @@
+export { VFab } from './VFab'

packages/vuetify/src/labs/components.ts

@@ -1,3 +1,4 @@
 export * from './VConfirmEdit'
 export * from './VCalendar'
+export * from './VFab'
 export * from './VPicker'