vuetify 3.5.5 → 3.5.7

package/lib/labs/VFab/VFab.css

@@ -0,0 +1,69 @@
+.v-fab {
+  align-items: center;
+  display: inline-flex;
+  flex: 1 1 auto;
+  pointer-events: none;
+  position: relative;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  vertical-align: middle;
+}
+.v-fab .v-btn {
+  pointer-events: auto;
+}
+.v-fab .v-btn--variant-elevated {
+  box-shadow: 0px 3px 3px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 3px 4px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 8px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-fab--app, .v-fab--absolute {
+  display: flex;
+}
+.v-fab--start, .v-fab--left {
+  justify-content: flex-start;
+}
+.v-fab--center {
+  align-items: center;
+  justify-content: center;
+}
+.v-fab--end, .v-fab--right {
+  justify-content: flex-end;
+}
+.v-fab--bottom {
+  align-items: flex-end;
+}
+.v-fab--top {
+  align-items: flex-start;
+}
+.v-fab--extended .v-btn {
+  border-radius: 9999px !important;
+}
+
+.v-fab__container {
+  align-self: center;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.v-fab--app .v-fab__container {
+  margin: 4px;
+}
+.v-fab--absolute .v-fab__container {
+  position: absolute;
+  z-index: 4;
+}
+.v-fab--offset.v-fab--top .v-fab__container {
+  transform: translateY(-50%);
+}
+.v-fab--offset.v-fab--bottom .v-fab__container {
+  transform: translateY(50%);
+}
+.v-fab--top .v-fab__container {
+  top: 0;
+}
+.v-fab--bottom .v-fab__container {
+  bottom: 0;
+}
+.v-fab--left .v-fab__container, .v-fab--start .v-fab__container {
+  left: 0;
+}
+.v-fab--right .v-fab__container, .v-fab--end .v-fab__container {
+  right: 0;
+}

package/lib/labs/VFab/VFab.mjs

@@ -0,0 +1,114 @@
+import { withDirectives as _withDirectives, createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, vShow as _vShow } from "vue";
+// Styles
+import "./VFab.css";
+
+// Components
+import { makeVBtnProps, VBtn } from "../../components/VBtn/VBtn.mjs"; // Composables
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
+export const makeVFabProps = propsFactory({
+  app: Boolean,
+  appear: Boolean,
+  extended: Boolean,
+  location: {
+    type: String,
+    default: 'bottom end'
+  },
+  offset: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  ...omit(makeVBtnProps({
+    active: true
+  }), ['location']),
+  ...makeLayoutItemProps(),
+  ...makeTransitionProps({
+    transition: 'fab-transition'
+  })
+}, 'VFab');
+export const VFab = genericComponent()({
+  name: 'VFab',
+  props: makeVFabProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const height = shallowRef(56);
+    const layoutItemStyles = ref();
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!entries.length) return;
+      height.value = entries[0].target.clientHeight;
+    });
+    const hasPosition = computed(() => props.app || props.absolute);
+    const position = computed(() => {
+      if (!hasPosition.value) return false;
+      return props.location.split(' ').shift();
+    });
+    const orientation = computed(() => {
+      if (!hasPosition.value) return false;
+      return props.location.split(' ')[1] ?? 'end';
+    });
+    useToggleScope(() => props.app, () => {
+      const layout = useLayoutItem({
+        id: props.name,
+        order: computed(() => parseInt(props.order, 10)),
+        position,
+        layoutSize: height,
+        elementSize: computed(() => height.value + 32),
+        active: computed(() => props.app && model.value),
+        absolute: toRef(props, 'absolute')
+      });
+      watchEffect(() => {
+        layoutItemStyles.value = layout.layoutItemStyles.value;
+      });
+    });
+    const vFabRef = ref();
+    useRender(() => {
+      const btnProps = VBtn.filterProps(props);
+      return _createVNode("div", {
+        "ref": vFabRef,
+        "class": ['v-fab', {
+          'v-fab--absolute': props.absolute,
+          'v-fab--app': !!props.app,
+          'v-fab--extended': props.extended,
+          'v-fab--offset': props.offset,
+          [`v-fab--${position.value}`]: hasPosition.value,
+          [`v-fab--${orientation.value}`]: hasPosition.value
+        }, props.class],
+        "style": [props.app ? {
+          ...layoutItemStyles.value
+        } : {
+          height: 'inherit',
+          width: undefined
+        }, props.style]
+      }, [_createVNode("div", {
+        "class": "v-fab__container"
+      }, [_createVNode(MaybeTransition, {
+        "appear": props.appear,
+        "transition": props.transition
+      }, {
+        default: () => [_withDirectives(_createVNode(VBtn, _mergeProps({
+          "ref": resizeRef
+        }, btnProps, {
+          "active": undefined,
+          "location": undefined
+        }), slots), [[_vShow, props.active]])]
+      })])]);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VFab.mjs.map

package/lib/labs/VFab/VFab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFab.mjs","names":["makeVBtnProps","VBtn","makeLayoutItemProps","useLayoutItem","useProxiedModel","useResizeObserver","useToggleScope","makeTransitionProps","MaybeTransition","computed","ref","shallowRef","toRef","watchEffect","genericComponent","omit","propsFactory","useRender","locations","makeVFabProps","app","Boolean","appear","extended","location","type","String","default","offset","modelValue","active","transition","VFab","name","props","emits","value","setup","_ref","slots","model","height","layoutItemStyles","resizeRef","entries","length","target","clientHeight","hasPosition","absolute","position","split","shift","orientation","layout","id","order","parseInt","layoutSize","elementSize","vFabRef","btnProps","filterProps","_createVNode","class","width","undefined","style","_withDirectives","_mergeProps","_vShow"],"sources":["../../../src/labs/VFab/VFab.tsx"],"sourcesContent":["// Styles\nimport './VFab.sass'\n\n// Components\nimport { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watchEffect } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType } from 'vue'\nimport type { Position } from '@/composables/layout'\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const makeVFabProps = propsFactory({\n  app: Boolean,\n  appear: Boolean,\n  extended: Boolean,\n  location: {\n    type: String as PropType<typeof locations[number]>,\n    default: 'bottom end',\n  },\n  offset: Boolean,\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n\n  ...omit(makeVBtnProps({ active: true }), ['location']),\n  ...makeLayoutItemProps(),\n  ...makeTransitionProps({ transition: 'fab-transition' }),\n}, 'VFab')\n\nexport const VFab = genericComponent()({\n  name: 'VFab',\n\n  props: makeVFabProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const height = shallowRef(56)\n    const layoutItemStyles = ref()\n\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      height.value = entries[0].target.clientHeight\n    })\n\n    const hasPosition = computed(() => props.app || props.absolute)\n\n    const position = computed(() => {\n      if (!hasPosition.value) return false\n\n      return props.location.split(' ').shift()\n    }) as ComputedRef<Position>\n\n    const orientation = computed(() => {\n      if (!hasPosition.value) return false\n\n      return props.location.split(' ')[1] ?? 'end'\n    })\n\n    useToggleScope(() => props.app, () => {\n      const layout = useLayoutItem({\n        id: props.name,\n        order: computed(() => parseInt(props.order, 10)),\n        position,\n        layoutSize: height,\n        elementSize: computed(() => height.value + 32),\n        active: computed(() => props.app && model.value),\n        absolute: toRef(props, 'absolute'),\n      })\n\n      watchEffect(() => {\n        layoutItemStyles.value = layout.layoutItemStyles.value\n      })\n    })\n\n    const vFabRef = ref()\n\n    useRender(() => {\n      const btnProps = VBtn.filterProps(props)\n\n      return (\n        <div\n          ref={ vFabRef }\n          class={[\n            'v-fab',\n            {\n              'v-fab--absolute': props.absolute,\n              'v-fab--app': !!props.app,\n              'v-fab--extended': props.extended,\n              'v-fab--offset': props.offset,\n              [`v-fab--${position.value}`]: hasPosition.value,\n              [`v-fab--${orientation.value}`]: hasPosition.value,\n            },\n            props.class,\n          ]}\n          style={[\n            props.app ? {\n              ...layoutItemStyles.value,\n            } : {\n              height: 'inherit',\n              width: undefined,\n            },\n            props.style,\n          ]}\n        >\n          <div class=\"v-fab__container\">\n            <MaybeTransition\n              appear={ props.appear }\n              transition={ props.transition }\n            >\n              <VBtn\n                v-show={ props.active }\n                ref={ resizeRef }\n                { ...btnProps }\n                active={ undefined }\n                location={ undefined }\n                v-slots={ slots }\n              />\n            </MaybeTransition>\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VFab = InstanceType<typeof VFab>\n"],"mappings":"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"}

package/lib/labs/VFab/VFab.sass

@@ -0,0 +1,82 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use 'sass:math'
+@use 'sass:map'
+@use './variables' as *
+@use './mixins' as *
+
+.v-fab
+  align-items: center
+  display: inline-flex
+  flex: 1 1 auto
+  pointer-events: none
+  position: relative
+  transition-duration: $fab-transition-duration
+  transition-timing-function: $fab-transition-timing-function
+  vertical-align: middle
+
+  .v-btn
+    pointer-events: auto
+
+    &--variant-elevated
+      @include tools.elevation(3)
+
+  &--app,
+  &--absolute
+    display: flex
+
+  &--start,
+  &--left
+    justify-content: flex-start
+
+  &--center
+    align-items: center
+    justify-content: center
+
+  &--end,
+  &--right
+    justify-content: flex-end
+
+  &--bottom
+    align-items: flex-end
+
+  &--top
+    align-items: flex-start
+
+  &--extended
+    .v-btn
+      // min-height: 56px
+      // min-width: 80px
+      border-radius: 9999px !important
+
+.v-fab__container
+  align-self: center
+  display: inline-flex
+  vertical-align: middle
+
+  .v-fab--app &
+    margin: 4px
+
+  .v-fab--absolute &
+    position: absolute
+    z-index: 4
+
+  .v-fab--offset.v-fab--top &
+    transform: translateY(-50%)
+
+  .v-fab--offset.v-fab--bottom &
+    transform: translateY(50%)
+
+  .v-fab--top &
+    top: 0
+
+  .v-fab--bottom &
+    bottom: 0
+
+  .v-fab--left &,
+  .v-fab--start &
+    left: 0
+
+  .v-fab--right &,
+  .v-fab--end &
+    right: 0

package/lib/labs/VFab/_mixins.scss

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

package/lib/labs/VFab/_variables.scss

@@ -0,0 +1,33 @@
+@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: 56px !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-width-ratio: math.div(16, 9) !default;
+$fab-padding-ratio: 2.25 !default;
+
+$fab-size-scales: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 2,
+  'x-large': 5
+) !default;
+
+$fab-sizes: () !default;
+$fab-sizes: map.merge(
+  (
+    'height': $fab-height,
+    'font-size': $fab-font-size,
+    'width-ratio': $fab-width-ratio,
+    'padding-ratio': $fab-padding-ratio
+  ),
+  $fab-sizes
+);