VSpeedDial.mjs 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VSpeedDial.css";
  4. // Components
  5. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
  6. import { makeVMenuProps, VMenu } from "../VMenu/VMenu.mjs"; // Composables
  7. import { makeComponentProps } from "../../composables/component.mjs";
  8. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  9. import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  10. import { computed, ref } from 'vue';
  11. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  12. export const makeVSpeedDialProps = propsFactory({
  13. ...makeComponentProps(),
  14. ...makeVMenuProps({
  15. offset: 8,
  16. minWidth: 0,
  17. openDelay: 0,
  18. closeDelay: 100,
  19. location: 'top center',
  20. transition: 'scale-transition'
  21. })
  22. }, 'VSpeedDial');
  23. export const VSpeedDial = genericComponent()({
  24. name: 'VSpeedDial',
  25. props: makeVSpeedDialProps(),
  26. emits: {
  27. 'update:modelValue': value => true
  28. },
  29. setup(props, _ref) {
  30. let {
  31. slots
  32. } = _ref;
  33. const model = useProxiedModel(props, 'modelValue');
  34. const menuRef = ref();
  35. const location = computed(() => {
  36. const [y, x = 'center'] = props.location?.split(' ') ?? [];
  37. return `${y} ${x}`;
  38. });
  39. const locationClasses = computed(() => ({
  40. [`v-speed-dial__content--${location.value.replace(' ', '-')}`]: true
  41. }));
  42. useRender(() => {
  43. const menuProps = VMenu.filterProps(props);
  44. return _createVNode(VMenu, _mergeProps(menuProps, {
  45. "modelValue": model.value,
  46. "onUpdate:modelValue": $event => model.value = $event,
  47. "class": props.class,
  48. "style": props.style,
  49. "contentClass": ['v-speed-dial__content', locationClasses.value, props.contentClass],
  50. "location": location.value,
  51. "ref": menuRef,
  52. "transition": "fade-transition"
  53. }), {
  54. ...slots,
  55. default: slotProps => _createVNode(VDefaultsProvider, {
  56. "defaults": {
  57. VBtn: {
  58. size: 'small'
  59. }
  60. }
  61. }, {
  62. default: () => [_createVNode(MaybeTransition, {
  63. "appear": true,
  64. "group": true,
  65. "transition": props.transition
  66. }, {
  67. default: () => [slots.default?.(slotProps)]
  68. })]
  69. })
  70. });
  71. });
  72. return {};
  73. }
  74. });
  75. //# sourceMappingURL=VSpeedDial.mjs.map