VSnackbar.mjs 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VSnackbar.css";
  4. // Components
  5. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
  6. import { VOverlay } from "../VOverlay/index.mjs";
  7. import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Composables
  8. import { forwardRefs } from "../../composables/forwardRefs.mjs";
  9. import { makeLocationProps, useLocation } from "../../composables/location.mjs";
  10. import { makePositionProps, usePosition } from "../../composables/position.mjs";
  11. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  12. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  13. import { useScopeId } from "../../composables/scopeId.mjs";
  14. import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
  15. import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities
  16. import { mergeProps, onMounted, ref, watch } from 'vue';
  17. import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs";
  18. export const makeVSnackbarProps = propsFactory({
  19. multiLine: Boolean,
  20. timeout: {
  21. type: [Number, String],
  22. default: 5000
  23. },
  24. vertical: Boolean,
  25. ...makeLocationProps({
  26. location: 'bottom'
  27. }),
  28. ...makePositionProps(),
  29. ...makeRoundedProps(),
  30. ...makeVariantProps(),
  31. ...makeThemeProps(),
  32. ...omit(makeVOverlayProps({
  33. transition: 'v-snackbar-transition'
  34. }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy'])
  35. }, 'VSnackbar');
  36. export const VSnackbar = genericComponent()({
  37. name: 'VSnackbar',
  38. props: makeVSnackbarProps(),
  39. emits: {
  40. 'update:modelValue': v => true
  41. },
  42. setup(props, _ref) {
  43. let {
  44. slots
  45. } = _ref;
  46. const isActive = useProxiedModel(props, 'modelValue');
  47. const {
  48. locationStyles
  49. } = useLocation(props);
  50. const {
  51. positionClasses
  52. } = usePosition(props);
  53. const {
  54. scopeId
  55. } = useScopeId();
  56. const {
  57. themeClasses
  58. } = provideTheme(props);
  59. const {
  60. colorClasses,
  61. colorStyles,
  62. variantClasses
  63. } = useVariant(props);
  64. const {
  65. roundedClasses
  66. } = useRounded(props);
  67. const overlay = ref();
  68. watch(isActive, startTimeout);
  69. watch(() => props.timeout, startTimeout);
  70. onMounted(() => {
  71. if (isActive.value) startTimeout();
  72. });
  73. let activeTimeout = -1;
  74. function startTimeout() {
  75. window.clearTimeout(activeTimeout);
  76. const timeout = Number(props.timeout);
  77. if (!isActive.value || timeout === -1) return;
  78. activeTimeout = window.setTimeout(() => {
  79. isActive.value = false;
  80. }, timeout);
  81. }
  82. function onPointerenter() {
  83. window.clearTimeout(activeTimeout);
  84. }
  85. useRender(() => {
  86. const [overlayProps] = VOverlay.filterProps(props);
  87. return _createVNode(VOverlay, _mergeProps({
  88. "ref": overlay,
  89. "class": ['v-snackbar', {
  90. 'v-snackbar--active': isActive.value,
  91. 'v-snackbar--multi-line': props.multiLine && !props.vertical,
  92. 'v-snackbar--vertical': props.vertical
  93. }, positionClasses.value, props.class],
  94. "style": props.style
  95. }, overlayProps, {
  96. "modelValue": isActive.value,
  97. "onUpdate:modelValue": $event => isActive.value = $event,
  98. "contentProps": mergeProps({
  99. class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
  100. style: [locationStyles.value, colorStyles.value],
  101. onPointerenter,
  102. onPointerleave: startTimeout
  103. }, overlayProps.contentProps),
  104. "persistent": true,
  105. "noClickAnimation": true,
  106. "scrim": false,
  107. "scrollStrategy": "none",
  108. "_disableGlobalStack": true
  109. }, scopeId), {
  110. default: () => [genOverlays(false, 'v-snackbar'), slots.default && _createVNode("div", {
  111. "class": "v-snackbar__content",
  112. "role": "status",
  113. "aria-live": "polite"
  114. }, [slots.default()]), slots.actions && _createVNode(VDefaultsProvider, {
  115. "defaults": {
  116. VBtn: {
  117. variant: 'text',
  118. ripple: false
  119. }
  120. }
  121. }, {
  122. default: () => [_createVNode("div", {
  123. "class": "v-snackbar__actions"
  124. }, [slots.actions()])]
  125. })],
  126. activator: slots.activator
  127. });
  128. });
  129. return forwardRefs({}, overlay);
  130. }
  131. });
  132. //# sourceMappingURL=VSnackbar.mjs.map